Boonaert Nicolas nicolas.boonaert AT NOSPAM supinfo DOT com Blog : Webdev Guide 30/01/2008

Transcription

1 Boonaert Nicolas nicolas.boonaert AT NOSPAM supinfo DOT com Blog : Boonaert Nicolas 1 / 67

2 SUMMARY 1. General Introduction Introduction of this article Presentation of the used tool Marketplace and target Possibilities Coding Language Website realization Project creation Type of project... 8 Dynamic Webdev... 8 Semi dynamic... 8 Static... 8 Dynamic AWP... 8 Dynamic PHP Databases and native access Other information about the project Project management Teamwork: the SCM Adding the project into the SCM Documentation Structure and design Design of the database Creating the analysis Adding the analysis in an existing project Configuration of the analysis Creating the tables Creating the relation Using an existing analysis Creating the data files Creating the pages Creating a basic page Presentation of the controls Adding some controls Changing the properties of the control Using the controls Creating a template Using a template in pages Advanced pages development Server-side code, client-side code and AJAX Server-side code Client-side code Using AJAX Procedures Boonaert Nicolas 2 / 67

3 2.6. Using the database Using HyperFile functions Searching into a data file Searching in a data file - Advanced Adding in the database Updating the data Other actions Using the requests Basic request Using request advanced and parameter Updating data using request Using SQL composed request Data binding on the controls Integrated request Using reports Simple report Report using parameters Database report Deploying the website Updating the website Updating the database Thoughts about Webdev Conclusion An open technology project About the author Boonaert Nicolas 3 / 67

4 1. General Introduction 1.1. Introduction of this article This article mainly covers the creation of a dynamic website using Webdev. The technologies implemented in this article will only utilize dynamic pages in order to not treat specific cases related to other types of page (PHP, AWP, etc.). This article also covers the various stages of creation of each element and their exploitation, with an analysis of the possibilities offered by Webdev while taking into consideration their pros and cons. Finally in this article, there are a lot of tips that can be used within this editor. But to being, we need to understand the project on which I had to work during the training course to show a concrete case and the environment of the project and the development, however certain elements of the original project are confidential that is why I have make the choice and use simple examples which are more accessible and simplify general comprehension. This article does not cover PHP development using Webdev or the use of the RAD or RID that are integrated inside Webdev. Boonaert Nicolas 4 / 67

5 1.2. Presentation of the used tool Webdev can be presented as an IDE (Integrated Development Environment) even if some prefers AGL (Atelier de Génie Logiciel FR) for this software. Webdev is an environment that proposes a large amount of features that help the developer, the project leader and the other peoples that work on the project. It allows us to create websites in different ways (described later) but the main features is its simplicity and the fact that he can give the possibility to concentrate ourselves directly on the essential, the features for the final clients without having to manage everything in the technical aspect. It stills really important to know how it works behind to optimize and resolve the eventual problems Marketplace and target Webdev is not like the other big editors on the market, in other words it should not be directly put in front of other tools like Microsoft Visual Studio or Eclipse, Netbeans etc. Webdev, Windev and Windev Mobile exist since many years and target the small companies which wish to be able to rapidly respond to the customer s needs. The editor is mainly French but it is declined in a English version and PC Soft (the creators of Webdev) announces that they have more than users on their products. They have a presence on the French market which is not without taking a place on the employment Possibilities Webdev is mainly used to create web applications: static websites, dynamic websites or reusable components. It integrates the last web technologies like for example AJAX (Asynchronous JavaScript And XML) supported since the v10 of Every technology in Webdev is always simple to use. PC Soft keeps this will to give access to those technologies without having to know the complete process. Of course it is important and useful to know those underneath processes to fully understand the process. That is what makes the difference with this tool. Boonaert Nicolas 5 / 67

6 Coding Language The coding language used in Webdev is principally the W-Language (L5G). It can be astonishing by its algorithmic aspect since we can use instructions or functions directly in French (or in English). In PC Logiciels, we code using French language. This W-Language is used for the code on the server-side or the client-side (the difference is explained later). It allows, of course, developing in object even if the company where I have worked does not use this feature. In this document, you will see that this notion of procedural coding process is not really important as this notion is a bit abstract. Here are some examples of W-Language: Declaration of some variables: nmonentier est un entier smachaine est une chaîne = "valeur d'initialisation" bmonbooléen est un booléen Webdev, in the default programming charter, automatically prefix variables. We can also note the presence of the assistance while coding (intellisense): Another example that shows a loop and a condition (if). POUR i = 2 A 20 SI (i modulo 2) <> 1 ALORS //if it s even Info("Ma variable de boucle = " + i) FIN FIN This language is directly understandable and we do not need to comment every line which helps to maintain the code. On the client-side (navigator), we can use the W-Language or JavaScript directly within Webdev. It is also possible to interact between the two kinds of code. We can for example use an external library in W-Language. Boonaert Nicolas 6 / 67

7 2. Website realization 2.1. Project creation In order to create the project, we can use different ways: Menu > File > New Main toolbar : Keyboard shortcut: CTRL + N. In all the cases, we can see the following window gathering all the possibilities of element creation. It is through this window that we will be able to create a new page, a new report or any other element of the project. This window gathers any kind of element by color to help to rapidly know what type of element it is: Yellow : Project; Green : Conception and architecture (UML, etc.); Blue : Project Element; Red: Analysis and database. Those elements are described in their use through the document. Boonaert Nicolas 7 / 67

8 Type of project Through this last window, we can see that there are different types of projects. This type of project is to be taken into consideration as it will impose certain restrictions. Dynamic Webdev Default type of project, it includes the whole functionalities and perfectly use all the components. It is the most complete project and the most functional, it can integrate static, dynamic or semi-dynamic pages which be based on the need on a database. Some disadvantages remain, it is important to indicate some of those: the dynamic website (Webdev) need to run on a specific engine developed and sold by PC Soft, if we want to get the website in production. Those dynamic website also have some problems to be indexed and referred by the search engines bots. Semi dynamic This type of project will be able to use semi-dynamic and static pages. The database access will be more limited (only one file accessed by page). Like dynamic projects, this type of project can have problems with the search engines and need the Webdev engine to be used in production. Static This type is used for static content, it is only HTML pages. There is no dynamic possibility (no database access) and this type of project does not require a specific engine. Dynamic AWP Mode AWP has many functionalities of the dynamic project (Webdev), there are some important features that are not present like the server session or some specific features. Dynamic PHP This type of project allows us to create a PHP based website directly within Webdev, we can use most of all the components. AJAX is not available in this version (11), like other specific actions. The main advantage of this type of project is that the final products are PHP page that can be host within any web server without having to use Webdev engine. Boonaert Nicolas 8 / 67

9 Databases and native access As said previously, we can use several types of database. Some databases are free to be used like HyperFile. This database engine is developed by PC Soft and has most of all common features like any relational database management system. The support of other type of database like Oracle, MySQL, SQL Server or many others, can be added using what is called native access which are some binaries to be installed. Some of them are free. Boonaert Nicolas 9 / 67

10 So, we can see that the current project can used every type of database and it allows to integrate an existing solution, the support is completed by OLEDB and ODBC which can be used in most of cases. UDC : Universal Data Connector (HLitRecherche, HExecuteRequête, File, Field, Binding, SQLExec, ) This diagram illustrates the possibilities offered within Webdev concerning the databases. PC Soft gives its diagram to show the possibilities of their platform composed by Windev-Webdev-Windev Mobile. Boonaert Nicolas 10 / 67

11 Other information about the project During the whole creation of the project, several steps occurred: Step 1: Description Through this step, we set the project s name, the folder (C:\Mes Sites by default). We can describe the project by a short sentence which will be used in the document. At this time and whenever we want, we can choose to integrate documents such as schedules of conditions, diagrams or any other file which will be useful in the realization of the project. All the documents are integrated within the project. Then we have to inform about what we want as final product. Webdev allows to generate websites or reusable components. But it supports the Windev and Windev mobile projects. In our case, we choose to create a dynamic website: Boonaert Nicolas 11 / 67

12 After having chosen the dynamic site (Webdev), we have the possibility to choose between different templates. They are predefined project that can help to create a website; we can choose for example a e-commerce template among many others. We choose a blank project. Other additional information can then be added concerning the deployment, the calendar of realization. Step 2: Team It is at this moment that we can set the work process: in a team or alone. When we choose to work in a team, we can describe the list of teams that will work on the project. It will be used to define some rights on the project. After setting the team, we need to add the different users. In order to manage efficiently, we can add the new project into a group. It can be a good thing when we work on several common projects. Next, we can choose to use (or not) the SCM (Source code manager, also called GDS in French). Step 3: Template We can choose a programming template (charter) that help the developer and prefix the variables and set the default name for the controls. We also can choose the graphical template that will be used for the style of the controls. Many templates are available. Step 4: Multilanguage support Webdev integrate the possibility to manage multiple language for a single website, we can set up to 20 languages and use those through the whole development. Step 5: Database This step allows us to set the type of database that will be used in the project. We can choose to create a new database or to use an existing one. Boonaert Nicolas 12 / 67

13 2.2. Project management In Webdev, we can use some great tools through the entire developing process: the integration of the external document, the management of the teamwork and even the stages of design and architecture Teamwork: the SCM The Source Code Manager (SCM) simplifies teamwork and enables several developers to work together on the same project at the same time and manage the histories and the backup. The integrated help informs us on its utilization: Thus, we see that at the first use, the referring project located on the Source Code Manager server is copied on the developer computer. It is completely possible for the administrator to set rights on the files and elements of the project for each user. When a user wants to modify an element of the project, he has to extract the element and once it is extracted, he can reintegrate within the SCM. Of course, this process can integrate multiple users and synchronization can be much more complex than exposed on this diagram. The SCM also integrates a system of verification before extraction, a system that manages the modification and the conflicts between the different versions. Boonaert Nicolas 13 / 67

14 The SCM also integrates a messaging system inside Webdev and the tools to attributes the different tasks to the different persons. Adding the project into the SCM In order to add the project to the SCM, we use the associated assistant. We choose to install a SCM database. When we have set the different controls that indicate which database will be used, we test the connection (Client/Server), we can step to the addition in the SCM. We can see the folder used within the SCM for the project and then we choose the elements of the project and dependences to be imported (by default all is imported). We finish the addition inside the SCM. Boonaert Nicolas 14 / 67

15 Documentation The documentation of a project is an always important stage; this is why it is present permanently in Webdev. Thus, we should not neglect every description and other information on the elements because it is used during the generation. It is possible to integrate the external document in the project in order to complete the additional information and it is also possible to automatically generate the documentation of the project. For that, we use the assistant by selecting: Menu > Project > Print the project documentation The assistant guides in various step where we select the type of file and the desired contents. We can also set the format (PDF, HTML, printer ) and the page setting Structure and design Concerning the design, Webdev gives the possibility of adding some diagrams directly to the project. Among the supported standards: UML diagrams (use case, sequence, transition, classes ) and the diagrams of flexible modeling. Those flexible modeling correspond to a descriptive diagram, we add some step, operations and choices. This modeling can be directly linked to the code and the events in the project and the modifications can be reflected in a direction or in the other. This is a powerful modeling tool inside Webdev, that simplifies the comprehension of some part of the project and so, they are really useful in teamwork and to bring maintainability. Boonaert Nicolas 15 / 67

16 2.3. Design of the database As I can t expose the spileo database, I choose to create a simple diagram helping for the comprehension Creating the analysis To create the analysis, the editor of Logical Model of Data (LMD) is used, we can choose to use the automatic generation of the analysis stating from a Conceptual Model of Data (CMD) sometimes easier to understand and realize. This creation of the analysis can be done in multiple versions. We can create in the same time that we create the project. We can add the analysis after. In both cases, the same assistant appears: Adding the analysis in an existing project To add an analysis in an existing project, we use: Menu > Project > Description After having selected the Analysis Tab in the assistant of description, we choose to create a new analysis by using the dedicated button. Boonaert Nicolas 16 / 67

17 The assistant of creation and configuration appears. Configuration of the analysis The first step in this assistant is to set the folder where the.wda file (analysis file) will be saved. We also can set a brief description for the documentation. We can set a password to secure the access to this analysis. Boonaert Nicolas 17 / 67

18 Creating the tables When we validate the creation, we see the blank editor. To create a new data file (a table), we can proceed in different ways : Right Click > New data file Menu > Insert > data file Toolbar : The assistant of creation is displayed, we can choose to create a new description for a data file, to create one using a template or to use an existing inside another analysis. We choose to create a new description in order to completely set what we want and fully understand how It works. When we correctly set a name for the data file (here we use Photo ) and set a brief description, we let the option automatic identifier checked to use it like a primary key. Then we choose the type of data file that will be created, in this case: HyperFile Classic. We validate the creation. The assistant of creation of the field in the data file (field/columns of a table) appears and we can see the automatic identifier (here IDPhoto but formally IDNameOfTheTable), we can directly see its type and its use. To put forward other functionalities, some other fields are added: we click into the table or we use the dedicated button on the right. We set the name and the description then we select the type among the list. The available type are explicit enough, what is really interesting is the fact that those types are composed by subtypes that allow to optimize our database. Boonaert Nicolas 18 / 67

19 Once all the fields are correctly set, we can see a graphical representation for the new data file (table), directly in the editor. We can, with the same process, create the complete database s diagram Creating the relation Tables are often related each others. To define these relation, the editor proposes an assistant who helps to define the relations. To define a relation: Menu > Insert > Relation Right Click > New relation Toolbar We only have to click on the two data file that we want to link and the assistant appears. We can see the use of the information set on each data file, to help to set the cardinality. Boonaert Nicolas 19 / 67

20 We choose the field that will be the base of the relation. Finally, we have to set the integrity rules for the suppression and the modification in order to maintain the integrity of the database. These rules are used into the security engine of the database. The new relation is visible inside the editor: We can continue to create the analysis and the rest of the project. Boonaert Nicolas 20 / 67

21 Using an existing analysis When we use the same database for multiple websites, we have to import the existing analysis within all the projects. We can copy the analysis of the main project into the current project s folder or can directly use the analysis from its current folder. To set the analysis that will be used into the project: Menu > Project > Description, then Analysis tab and we select the analysis. Sometimes, it is also possible to directly import external databases. For example, we can drop some MS Access files, Excel or XML among many others, directly into the editor. The importation is managed through a dedicated assistant Creating the data files The analysis (diagram of the database) is a logical view of the database s elements. The data are in fact present in the data files (used by the database engine). To create those data files, we can use a new feature of the v11: Right Click on a graphical representation of a file > Create data file Another solution, in the project initialization code (F2 on the Webdev dashboard), using this code: HCréationSiInexistant("*") Boonaert Nicolas 21 / 67

22 2.4. Creating the pages Creating a basic page To create a dynamic Webdev page in the project: Menu > File > New Shortcut: CTRL + N Toolbar The assistant that help to create pages appears, we can choose from many available options that allow automating the creation (we select what we want to use from the database, the RAD can generate a page with the corresponding controls on it) or we can choose to do all by ourselves. We can set the template that will be applied to the page, those models are explained further. To begin, we choose to let it without a template applied by default. The new blank page is now in the editor, we save this file using a filename which is relevant. Menu > File > Save Shortcut: CTRL + S We can name it PAGE_Accueil (or PAGE_Home) and use a prefix PAGE_ that corresponds to the pages in the project. This name can be modified when we want, through the description and reflected on the entire code (refactoring). Thus, we can observe this new element in the project s tree: Boonaert Nicolas 22 / 67

23 Presentation of the controls The controls are elements that can be used on the page like image, label, input These elements become some HTML components during the generation, so they can be accessed through the DOM (Document Object Modifier) with their aliases names. By default, these aliases are automatically generated and are compressed to gain on the page size, however we can set the dedicated option to false to maintain a human readable HTML: Menu > Project > Description. By default, the HTML that is generated by the Webdev engine is optimized, all the options are available to customize what you will have in output: Boonaert Nicolas 23 / 67

24 Adding some controls To add some controls on the page: Menu > Insert The associated toolbar, and drag and drop the element on the page: Some feature of Webdev can help to position the controls on the page like rules or positioning and alignment help. We can use it by pressing F6 and F6 to position the controls on the page: Boonaert Nicolas 24 / 67

25 Changing the properties of the control When we add a control on the page, it is necessary to set their properties, to keep this simple, Webdev use an assistant that is composed by dedicated tabs. Here, we want to modify the image control, added to our page: General tab: Here, it is possible to set the name of the control, the path which must be accessible by and from the web server. We can see other properties like the type, the display style and the associated action to the click on the control. Detail tab: We can set the visibility, the overlay (using DIV) and also the dimensions and the keyboard association. Boonaert Nicolas 25 / 67

26 Link/Relation tab: Through this tab we can set the automatic data binding on the control. This notion will be more explained in a next part of the document. Note tab: Those notes are used in the technical documentation and by the developer. Boonaert Nicolas 26 / 67

27 Help tab: Here, we can set the information that appears on the tooltip when the mouse is over. Advanced tab: Webdev allows us to access to some part of output code and we can set some information in HTML that will be directly integrated in the generated HTML. Boonaert Nicolas 27 / 67

28 Border and background tab: Here, we can edit some CSS properties applied on the control like the border, the padding, the overflow or the background. Boonaert Nicolas 28 / 67

29 Style tab: CSS files are managed by Webdev, we can choose to use an free style, a unique way of this control or using some styles. It really is the CSS properties, every information CSS is defined with this assistant (text format : bold, font, state on mouse over ). Boonaert Nicolas 29 / 67

30 The modifier: We can also change the properties using the modifier: Menu > Display > Toolbar > Modifier Here, we change the properties of a image control, most of all of these properties are present for every kind of controls. But some are specific for example the state (Active, Disabled, Show only) for some input controls. Using the controls Once all the controls added to the pages, it is time to use them in the code. To access to the code of a control: Right Click: Code Shortcut: F2 Here, on the button (BTN_Modifier), we can see the code editor and the event (click) of this button. We can see an initialization code that is a server side code. A click event on the client-side and on the server-side, the difference between client and server will be explained a few lines below but in a word: the server side is run on the server and it is W-Language, and client-side is run on the navigator (JavaScript). Boonaert Nicolas 30 / 67

31 Here we want to test the value of a input when the button is clicked, this is the basic code: SI SAI_Modif <> "" ALORS LIB_TexteAModifier..Valeur = SAI_Modif..Valeur SINON Info("Le champ de saisie est vide") FIN This way we describe elements can be surprising but it stills really understandable. Firstly we test if the input is not empty. If it contains something, we set the label value with the input value. If it is empty, we inform the user (alert() JavaScript). The properties on a control or any element in the project can be accessed in this way: NameOfControl..PropertieName The intellisense helps us to use these properties. Boonaert Nicolas 31 / 67

32 Creating a template This concept is simple to understand, it is in fact an element that define CSS and add some controls on a page which is based on. In other technologies, it is called also template or Master page, they help to conserve a coherence between every page, and it is a real advantage in time and in maintainability. Really useful for the common menu, for example, I change two buttons in this template, it can regenerate all the pages that used this template. To create a new template: Menu > New > Template Toolbar Shortcut: CTRL+N The template appears inside the editor, we can see the yellow border that indicates that it is a template. We save this template with a prefix to identify the kind of element. This template is added into the project in the subfolder Templates : To add some controls into this template, we can proceed like in a page, it is the same for the controls properties. To position every controls, we can use the same tips (F6 and F7). We can have to use flexible design that adapts from the navigator size, to take that into consideration, we use extensible area and the size of navigator: To see those extensible area: CTRL + I To see the different standard size of navigator: CTRL + M Sometimes, we already have a page and we want to use it as a template, Webdev allows us to do so easily: Menu > File > Save as template Boonaert Nicolas 32 / 67

33 Using a template in pages To use a template in a existing page, we need to go into the description of the page then we click on the dedicated button: The current templates used within the page are displayed in a list, we can choose to add or remove. The eventual conflicts to set the position of every control are indicated to the developer. Boonaert Nicolas 33 / 67

34 When we create a new page, we can also choose to base it on a template that we choose: Description using a concrete case: PAGE_Accueil (Home): This template adds 2 controls on the page that used it. There a represented in yellow on this image. The blue controls are those only present in the specific page. On the editor, the controls added by the template are displayed with a little yellow square it the top left corner, to open the corresponding template, right click on this square and select open the template. Boonaert Nicolas 34 / 67

35 2.5. Advanced pages development Server-side code, client-side code and AJAX There are two types of code, server-side and client-side. Server-side code The code server-side is run on the server into the Webdev (deploy) engine. This code is really complete and can access to the system, to the data or treatments on the server without any particular restrictions. It is displayed in yellow/orange in the editor and précised with a small indication into parentheses. Client-side code This code is run on the navigator, on the website visitor s computer. We can develop with JavaScript or W-Language that will be generated in JavaScript in the final element. In the editor, the client-side code is indicated in two colors: green (W-Language) and blue (JavaScript). There is a small indication into parentheses. To change the type of code W-Language <> JavaScript, the only things to do is to click on the abbreviation of the type in the ribbon. Like we have seen previously, this client-site code generation (W-Language to JS) can be set in the description of the project and in the options of generation. Through this client-side code, we can access to the screen resolution or other information about the navigator. Boonaert Nicolas 35 / 67

36 Using AJAX Webdev allows us to work with the AJAX technology (Asynchronous JavaScript And XML) allowing to make asynchronous call to the server without having to do a complete postback to refresh the entire page in the navigator. Basically, we use an object (XMLHttpRequest) to manage the request to the server and the responses (XML or JSON). This diagram describes how it works when AJAX is not used: NON-AJAX Navigator Web server XMLHttpRequest JavaScript CSS HTML Request Page Request HTML Response HTML Page HTML Request Page Request HTML Response HTML Page Webdev HTML HTML Request Page Request HTML Response HTML Page Every request makes a full postback and refreshes the entire page and its content. Here when AJAX is enabled: APPELS AJAX Navigateur Serveur web XMLHttpRequest JavaScript CSS Requête HTML - Requête de la page Réponse HTML Page HTML Requête Asynchrone Réponse JSON / XML Webdev HTML Requête Asynchrone Réponse JSON / XML The first request does not change; it is a HTML Request and a response HTML that load the entire page. Boonaert Nicolas 36 / 67

37 The second request however, like the other requests, is asynchronous and can happen from an event on the navigator as from the server. The response contains the data concerning only the modification in JSON (JavaScript Object Notation) or XML (Extensible Markup Language) and is managed by the dedicated XMLHttpRequest object. These request does not require any refresh on the page and update only a part of the page. The user experience is friendlier and the traffic between the navigator and the web server are reduced in most of cases. I choose to not give to many details on how it works more deeply but it is important to know how It works to weigh pros and cons about a solution. To use AJAX in Webdev, PC Soft makes it really simple: On a server event: For example a (server event click on a button) To activate AJAX on this treatment, we only need to click on AJAX Enabled in the yellow ribbon. That is all we need to do to activate AJAX on this treatment. Here it is a useless utilization, but it is really useful when we want to request the database without refreshing the entire page for example. On a control: Some controls are AJAX-capable, for example, the buttons, the repeaters, the combo boxes With these controls, the data are dynamically added into the controls when we use them. It speeds up the load speed by only downloading what we can see in the navigator. In table for example, even if a table contains 1000 rows, if the developer set this option, the navigator can load only the 10 that are displayed (on the ones the control is set) and the user can for example directly edit data into this table. Boonaert Nicolas 37 / 67

38 To activate AJAX on a control, we use the description of the project then we checked AJAX Mode, here on a table (Grid): Boonaert Nicolas 38 / 67

39 Procedures In the project, we have to do the same thing in many different treatments in the same page, we can use the local procedure to regroup these common treatments. When this treatment is used on many pages, we use the global procedure and place them into a collection. It is really useful when we need to import the collection into another project. Of Course, there are two types of procedure: server-side and client-side. Some of these server-side procedures can be called in AJAX from a client-side code but we need to activate AJAX on the precise procedure by clicking on the AJAX signal (it turns green): Boonaert Nicolas 39 / 67

40 To call it from a client-side code in W-Language: AJAXExécute(MilliVersSecondeEtMilli,20100) As a general rule: AjaxExécute(NomProcédure, Paramètre1, ) or AjaxExécuteAsynchrone(NomProcédureServeur, NomProcédureNavigateur, Paramètre1, ) The difference between the two solutions: In the first, the code that follows the treatment is not executed while the server s response is not received. The rest of the treatment is paused. In the second, the code continues its cycle that s why we need to set a callback function that will be called when the server s response is received. In both cases, the intellisense shows us the prototype of this procedure and gives us information on the parameters (name, utility, optional ). Boonaert Nicolas 40 / 67

41 2.6. Using the database In dynamic websites, we can interact with a database; we need to use a server-side code to access to the database. Webdev gives many possibilities to use the database like the dedicated HyperFile functions in W-Language, the request Webdev or SQL Using HyperFile functions The W-Language simplifies the data access; we can use a powerful intelissense and many useful functions. These functions are prefixed by H like : HNameOfFunction(). Searching into a data file Here is a simple code to perform a search in a data file: HLitRecherche(Utilisateur,Pseudo,SAI_Pseudo) SI HTrouve(Utilisateur) ALORS SI Utilisateur.MotDePasse = SAI_Mot_de_passe ALORS //code de traitement... // Info("Vous êtes bien authentifié") FIN FIN Firstly, we execute the search in the data file called Utilisateur (user) from the analysis. HLitRecherche() initialize the position of the read index on the first row that results from the search (HRecherche()) and initialize the data contact on the server (HLit()). Its parameters are: the data file that will be used, the field on which we perform the search and the term that we search. We check if we have a result thanks to the function Htrouve(). This function returns a Boolean that indicates if there is a result. We make our treatment, here we check if the password typed into the input is the same as the one in the database. To access to the database value, as our read index is initialized, we can use this notation: NameOfFile.NameOfField. The result of this notation is the real value in the database. Boonaert Nicolas 41 / 67

42 Searching in a data file - Advanced This code allows to get the users who have their pseudo that begins with by the specified string, it is a server-side code: smaclé est une chaîne = HFiltreCommencePar(Utilisateur,Pseudo,"to") HLitPremier(Utilisateur,sMaClé) TANTQUE PAS HEnDehors() Info(Utilisateur.Pseudo) HLitSuivant() FIN //turn off the filter HDésactiveFiltre(Utilisateur) We initialize the filter with HFiltreCommencePar(). This function takes some parameters: the data file name that will be used, the field on which we want to filter, and the string that specifies the filter. The result is the key field on which the filter will be set. We initialize the read index on the first row of the data file using HLitPremier() and we place in parameters the data file and the key field. We use a loop to treat every result in the data file. To do so we use HEnDehors(). It returns a Boolean that is true when the read index is not in the data file anymore. We display the data read from the base. We set he read index to the next row using HLitSuivant(). We turn off the filter using HDesactiveFiltre() to not be annoyed in the rest of the code. Boonaert Nicolas 42 / 67

43 Adding in the database A simple addition in a data file, in server-side code: Utilisateur.Pseudo = SAI_Pseudo Utilisateur.MotDePasse = SAI_Mot_de_passe Utilisateur.Mail = "toto@mail.com" Utilisateur.DateInscription = DateSys() + HeureSys() SI PAS HAjoute(Utilisateur) ALORS Info(HErreur(hErrEnCours)) FIN We initialize the data context by setting the value using this notation: NameOfFile.NameOfField = value to be set We can see the use of DateSys() and HeureSys() that returns the date and the hour on the server. At this precise moment, the data are only in the data context on the server, they are not in the database yet. We effectively add the data into the data file in the database using HAJoute(). This function returns a Boolean that indicates if the addition succeeds. If not we returns the error to the user. To catch all information about the error, we use HErreur() that can take into parameter a variable to specify more precisely what we want to catch. Updating the data A small code that update data in the database, server-side code: HRecherche(Utilisateur,Pseudo,SAI_Pseudo) SI HTrouve(Utilisateur) ALORS Utilisateur.Mail = "toto@supinfo.com" HModifie(Utilisateur) FIN We initialize the read index on the row that we want to update by using HRecherche() to search the corresponding user. We update the data context on the server. The field Mail is updated. At this moment, the updated data are not updated in the database. We update the database by using HModifie(). Other actions There are many HyperFile functions, they cover almost all need to gain access to the database or to manage the data connection. Boonaert Nicolas 43 / 67

44 Using the requests The requests are more interesting than the use of HyperFile functions since they are reusable between the different projects and they are automatically optimized. Adding to the fact it is more pleasant to use requests in the code. To create a new request: Menu > File > New Shortcut: CTRL + N Basic request A basic request is just a request that selects what we want and so filters the data within the database. When we create the request, we need to set its type: The graphical request builder appears. It is a powerful assistant that help to compose some request by selecting what we wants in the list. In fact, we have a treeview containing the existing data file from the analysis and eventually some requests already set. We choose the field that we want to select with our request, by adding these fields in the main list. Through this list we want make some sort or filter treatments and it is then indicated by some icons. It is easy and powerful to compose real requests. We can set a real name for the request and type a small description. Boonaert Nicolas 44 / 67

45 Once the fields have been selected and the different conditions set, we can have a graphical representation of this request: In this case, this request selects the top 20 in the photo data file (Best rating). Boonaert Nicolas 45 / 67

46 We can see the SQL code that have been generated by this editor by pressing F2 in front of the graphical request, we can also modify this code (we lose the possibility to continue to use the graphical editor). SELECT TOP 20 Photo.IDPhoto AS IDPhoto, Photo.Description AS Description, Photo.CheminImage AS CheminImage, Photo.ValeurVote AS ValeurVote, Photo.NombreVote AS NombreVote, Photo.DateAjout AS DateAjout, Photo.IDUtilisateur AS IDUtilisateur FROM Photo ORDER BY ValeurVote DESC When this request is save in the project, we can see that it is added in the subfolder Requests : To use this request in the code, server-side code: SI HExécuteRequête(REQ_TopPhoto) ALORS HLitPremier(REQ_TopPhoto) FIN SI HNbEnr(REQ_TopPhoto) > 0 ALORS TANTQUE PAS HEnDehors(REQ_TopPhoto) Info(REQ_TopPhoto.CheminImage) HLitSuivant(REQ_TopPhoto) FIN FIN We initialize the request on the server, it executes the request and initializes the data context on the server. To do that, we use HExecuteRequête(). This function takes in parameter the name of the request that will be used. It returns a Boolean that indicates the state of the initialization so we check if there is not a problem during the initialization. We set the read index position on the first row of the data context returned from the request. We browse all the results in a loop. Boonaert Nicolas 46 / 67

47 Using request advanced and parameter In the previous case, we only have done a sort treatment and a restriction on the number of result that we want. Webdev supports a lot of possibilities that are present in SQL Language. Here this request will select the top 20 from the data file Photo, but also select the information on the author (user) and we impose a maximal age in parameter for not having old stuff. First, as always, we select what field we want by adding them into the main list. We select those information from the data file Photo and Utilisateurs in the analysis. We set the sort treatment on the field called ValeurVote and we set a condition on the field DateAjout by clicking into the main list, the assistant appears: It is really useful to prefix the parameters name with P_ for example, it will be more pleasant to use it in the code. We set a maximal amount of result by clicking n premiers (n first) into the graphical editor and we delete the eventual result that appears twice. Boonaert Nicolas 47 / 67

48 Here is the graphical result for this request: The SQL code that have been generated: SELECT DISTINCT TOP 20 Photo.IDPhoto AS IDPhoto, Photo.Description AS Description, Photo.CheminImage AS CheminImage, Photo.ValeurVote AS ValeurVote, Photo.NombreVote AS NombreVote, Photo.DateAjout AS DateAjout, Photo.IDUtilisateur AS IDUtilisateur, Utilisateur.Pseudo AS Pseudo_Ut, Utilisateur.DateInscription AS DateInscription, Utilisateur.Mail AS Mail, Utilisateur.IDUtilisateur AS IDUtilisateur_Ut FROM Utilisateur, Photo WHERE Utilisateur.IDUtilisateur = Photo.IDUtilisateur AND ( -- Date maximale des photos Photo.DateAjout >= {P_DateLimite} ) ORDER BY ValeurVote DESC Boonaert Nicolas 48 / 67

49 If we want to use this function in our server-side code: dhmadatelimite est une DateHeure dhmadatelimite..mois = 3 dhmadatelimite..année = 2007 dhmadatelimite..jour = 12 dhmadatelimite..partieheure = 0 REQ_TopPhotoInfo.P_DateLimite = dhmadatelimite SI PAS HExécuteRequête(REQ_TopPhotoInfo,hRequêteDéfaut) ALORS Info("ERREUR:"+HErreur(hErrPrincipal)) SINON HLitPremier(REQ_TopPhotoInfo) TANTQUE PAS HEnDehors(REQ_TopPhotoInfo) Info(REQ_TopPhotoInfo.CheminImage) HLitSuivant(REQ_TopPhotoInfo) FIN FIN We create a variable which is of type of DateHeure to specify the date and the time. We initialize the request s parameters by using this notation: NameOfRequest.P_NameOfParameters = value Thanks to our prefix, we can easily identify the parameters using the intellisense. We initialize the request and check if there are no errors. We use the result in a loop as usual. This type of requests that use parameters can be really complex, in the training course project I use lots of big requests through this methods. The prefix on the parameters is really useful. Boonaert Nicolas 49 / 67

50 Updating data using request When we create a new request, we select the type update : We have to choose the data file that will be used: Boonaert Nicolas 50 / 67

51 Then we set the field that we want to update and the condition to select or modify them: We give the request a name and a description and we validate, the graphical representation appears in the editor and we can save the request into the project: The SQL code generated: UPDATE Photo SET DateAjout = {P_DateModif} WHERE -- Date maximale des photos Photo.DateAjout >= {P_DateLimite} Boonaert Nicolas 51 / 67

52 All the possibilities to compose or modify the request are also available for this type of request. On the same thing, there is the delete request that allows us to delete some content from the database using some conditions Using SQL composed request Sometimes, the developer has to compose the requests from his specific needs, to dynamically compose the request. Webdev allow us to compose our SQL request and execute them within the W-Language. Webdev does not check the validity of the request, so we should be sure that the request is correct and for that, we should use the other solution to use request. This one described here is for certain scenarios. Here is the code that allows us to request some information (specified in a vector). //external parameters monordresql est une chaîne = "SELECT " monfichierrequeté est une chaîne = "Photo" srubriquetemp est une chaîne marequetecomposée est une chaîne mesrubriquesselectionnées est un tableau de 3 chaînes TableauAjoute(mesRubriquesSelectionnées,"Description") TableauAjoute(mesRubriquesSelectionnées,"CheminImage") TableauAjoute(mesRubriquesSelectionnées,"IDUtilisateur") //request composition marequetecomposée = monordresql POUR TOUT ELEMENT srubriquetemp DE mesrubriquesselectionnées SI srubriquetemp <> "" ALORS marequetecomposée += monfichierrequeté + "." + srubriquetemp + "," FIN marequetecomposée = Gauche(maRequeteComposée,Taille(maRequeteComposée)-1) //We delete the last comma, marequetecomposée += " FROM " + monfichierrequeté + ";" //utilization of the request sdma_req_compose est une Source de Données HExécuteRequêteSQL(sdMA_REQ_Compose,maRequeteComposée) HLitPremier(sdMA_REQ_Compose) SI HTrouve ALORS TANTQUE PAS HEnDehors Info(sdMA_REQ_Compose.Description) FIN FIN In this code, we initialize some variables that simulate other applications settings for examples. It is to put forward the dynamic possibilities of this solution. We construct a string that contains the SQL request using the previous variables. We create an object of type Data source (source de données in this code), this element will be used through the W-Language. We initialize the request by using HExecuteRequeteSQL(), here it takes as parameters the data Boonaert Nicolas 52 / 67

53 source object and the string that represents the request. We use the datasource to get all the data we want in our treatment, like we usually do. We can see that this solution is a bit complex, however it stills really used like to manage manually the historic on the data file Of course, we can use more simple codes with this solution, but it is not rally often used for that: ReqPhoto est une Source de Données // initialization of the request HExécuteRequêteSQL(ReqPhoto,"SELECT Description FROM Photo") This solution is not advised because it is hard to understand, to maintain and to develop. Adding to the fact it is not easily reusable but some cases impose this solution. Boonaert Nicolas 53 / 67

54 Data binding on the controls The data binding on the controls is used to directly associated data to the corresponding controls in a way or in another. This technique is a time-saving solution and it improves the code s maintainability. To create the binding on the controls, we need to use the description assistant on the control and go on the link/relation tab. We select the field that we want to bind, directly from a treeview representing the analysis, the data file and field and the request and their field. Once this relation set, we must keep in mind that the displayed data is extracted from the data context on the server, so we must initialize it to display data. Here we set a relation on many controls with the request REQ_TopPhotoInfo. We want to display some information about the top picture that results from the request. Boonaert Nicolas 54 / 67

55 With the same request, the code is easier to write as every association is done once. dhmadatelimite est une DateHeure dhmadatelimite..mois = 3 dhmadatelimite..année = 2007 dhmadatelimite..jour = 12 dhmadatelimite..partieheure = 0 REQ_TopPhotoInfo.P_DateLimite = dhmadatelimite SI PAS HExécuteRequête(REQ_TopPhotoInfo) ALORS Info("ERREUR:"+HErreur(hErrPrincipal)) SINON HLitPremier(REQ_TopPhotoInfo) FichierVersPage(MaPage) FIN The rest of the initialization and browsing code does not change, only the relation code is changed. We use FichierVersPage() that take an optional parameter corresponding to the page on which we want to bind the data. This automatic binding can be manually completed and it works in the two way (DB>Screen; Screen>DB) with PageVersFichier(). Boonaert Nicolas 55 / 67

56 Integrated request When we add a control to the page, we may wish to automatically initialize without having to execute a request. It is almost when we want to display in one specific control. We do not use it somewhere else in the project so we choose to use an integrated request. For that, we can use many solutions to use integrated request. The easiest is to create the control based and set an integrated request in the same time like when we create a data grid (table); we can choose to fill the control with the result from a common request, manually or by an integrated request like presented here. So we choose the integrated request solution in the assistant: The graphical assistant to create the requests appears and we choose the field that we want to use. When the request is set, we continue and we have to select what field will be in the control (here we select the column in the data grid). Then we select the key field that is used to indicate the order to fill the data grid and we set the control s properties. Once all this steps completed, when we run the page (Go), we can directly see that the table has data as content without writing any code to display or read data. Boonaert Nicolas 56 / 67

57 The data binding is a powerful feature that is easy to use. It can be time-saving during the developing process. In some case we can t use this binding, we need to set this manually but when we can implement it, we should absolutely not hesitate because this connection can be a source of retro modification: when we modify the analysis, we can choose to update every linked control if we want. So it is really helpful and improves the maintainability. Boonaert Nicolas 57 / 67

58 2.7. Using reports The reports are high-quality documents that bring textual or graphical information in order to be print or send in a mail for example, we can also generate some file in PDF format among many others (Excel, XML ) Simple report This simple report does not use the database, its content is fixed one and for a time and it shows some general information. To create a report, we need to create a new element in the project File > New > Report CTRL + N Toolbar Firstly we need to choose its type: Its type sets the main structure and configures some controls and the data access. Here we choose to use a blank report so we do not use any data source. Then we need to set the information on the size and style and finally set a name and a brief description. When this steps are completed, we can preview the report into the report editor in Webdev, we save the report (it is a.wde file) and we can see it added into the project: The editor shows us that the report is composed by several part that helps to set the page settings. The different part can be configure in a list through the description window (Right click > Description on the report) and we can configure what is called block in the report. Boonaert Nicolas 58 / 67

59 Each part can define some properties on the report and set the document settings. Through the description (Right click > description on a part). So we can set all the report s properties. Boonaert Nicolas 59 / 67

60 To add some controls on the report, we proceed as usual: Menu > Insert > New controls Toolbar (drag & drop): The controls properties can be set through the description window. Once the report is done, we can preview it by running it (Small Go) in several formats: To use this report in code, we can use several functions, we can for example open it directly within the web browser: NomFichier est une chaîne = "fichier.pdf" iaperçu(ipdf, NomFichier) iimprimeetat(etat_simple) FichierAffiche(NomFichier, "application/pdf") First, we create a string that corresponds to the filename. The file will be generated in the WEB folder in the root folder of the website. We initialize the generation settings by setting the filename and the type of file that will be created. To do that we use iaperçu(), it takes in this prototype, as first parameter the type of the file and then the name of the file. There are lots of prototypes for this function, we can send the document to a printer or a fax among many examples. We generate the report, it is initialized and created using the specified settings. At this moment, the PDF file is really created. We use iimprimeetat() that takes as parameters the name of the report that will be used. The last line of coding is to display the newly generated file directly into the navigator. We use FichierAffiche() by setting the name of the file and the MIME type that is associated. As a general rules all the functions that start with ixxx are printing or generating functions. It can be used to use report. Boonaert Nicolas 60 / 67

61 Report using parameters Sometimes, we need to set some parameters and display customized information. To use this parameters and the information, we change a few thing: In the opening code of report: PROCEDURE ETAT_Simple(gMonParametre1, gmonparametreoptionnel = "texte optionnel") The first parameter will be mandatory, the second is optional. In the read of article, we can use the parameters by using them directly like global variables. LIB_Nom = gmonparametre1 + " " + gmonparametreoptionnel To initialize these parameters when we use iimprimeetat(), we set the parameter when we call iimprimeetat like in this server-side code: //Generating a PDF file NomFichier est une chaîne = "fichier.pdf" iaperçu(ipdf, NomFichier) iimprimeetat(etat_simple,"nicolas Boonaert") FichierAffiche(NomFichier, "application/pdf") iimprimeetat() take these parameters after the first one that is the name of the report to be print. We can notice the intellisense that help the developer: Boonaert Nicolas 61 / 67

62 Database report In certain cases, we wish to use information directly from the database and put them on the report, we can use a database within the report and we can take advantage of the automatic data binding like on the page. When we create a new report, we just need to select the type of database but here we will change the relation with the database using description on the report and in data tab. For this example, we want to use the top request already used before. We need to change the value in the combo boxes in the description window on the report. After that, let see what changes in the calling code, we need to initialize the request before the report generation: dhmadatelimite est une DateHeure dhmadatelimite..mois = 3 dhmadatelimite..année = 2007 dhmadatelimite..jour = 12 dhmadatelimite..partieheure = 0 //Impression au format PDF NomFichier est une chaîne = "fichier.pdf" iaperçu(ipdf, NomFichier) iinitrequêteetat(etat_simple,dhmadatelimite) iimprimeetat(etat_simple,"nicolas Boonaert") FichierAffiche(NomFichier, "application/pdf") We use iinitrequeteetat() to initialize and execute the request and initialize the data context. This function takes as parameters the name of the report to be generated, then the parameter of the request. Boonaert Nicolas 62 / 67

63 Finally, we add a label in our report and in it, to gain access to the value of the request, we need to use a specific notation: [%Description%] [%Field%] More generally: When the report is created, the data are read and this notation is replaced by the value in the data context Deploying the website The website which has been developed was deployed on a system Windows 2003 Server using IIS. To deploy the website, PC Soft simplified this step by automating the process. So to do deploy: Menu > Workshop > Create the Installation procedure The dedicated assistant appears and we can select the element of the project that we want to add in the installation and the language that will be included. Then we can set some information about the description, the copyright, the version and the editing company. After these steps, the installation creation assistant appears and we can choose the type of installation: remote installation, remote update, installation through a physic medium (CD or DVD ), preparation of a deployment package. In our case, we choose to use the installation on a physic medium. After having set the information, the automated installation file is generated in the project folder in a subfolder called INST : C:\Mes Sites\Mon_Projet_Exemple\INST To install the website, we only need to double-click on the generated file and install it automatically on the server. This installation stops the internet server(iis or Apache) and restarts them after. Boonaert Nicolas 63 / 67

64 2.9. Updating the website Updating the database The project is always updating to correct some bugs or to complete the service, sometimes we need to change the analysis and the database. When we make some modification on the analysis, we must change the data file in the used databases. Indeed, in order to avoid any corruption problem, we need to propagate the modification onto the data file. When we are the administrator of the project (team project master) we can modify the analysis. Once the changes are done, we can regenerate the analysis, its version number is incremented: to do that, we use this dedicated button: For every regeneration, the old analysis configuration is saved in a specific folder in the project root folder: MonAnalyse.wd11/ANAXXXXX (where XXXXX is the version number) Webdev informs us that some file definition have changed and that we should change the data file of the database. This assistant takes the different database connection so we can update the test databases, the local databases or the distant databases on another server. It automatically manages the backup and the administrator (project master) can choose which database should be update: Then it is possible to choose, based on the same way, the data file that will be updated. It is also possible to manage the backups to keep an working version of the data file. This update is entirely done with a backup so we can change back to an old version if there is any problem during this critical operation. Boonaert Nicolas 64 / 67