Home

CodeCharge Studio - Introductory Tutorial

1. lt FORM gt Properties Desion ATML Code Preview Live Page TABLE Properties roues TD Properties lt INPUT Properties Publishing page Mew Pagel Generating Default Properties Far Help press F1 CodeCharge Studio Tutorial Finalizing Search and Grid created by the Wizard 75 Configure ListBox Field Specify the Connection Data Source Bound Column and Text Column for the ListBox ll File Edit Project View Table Tools Help JO eh CE c X Ga ele tee ld b lalla J zi l B zu AT Default x cdi moe Directory x Components Rsthcr CR Denice eae Be Common Files ES vu oa E Pages m3 SEL RP Default GS rj H Eg departmet tou Search Departments Employees l FB departmei Ir fError 28 Connections c EEG 09995 Department Name Select Value alue gt E sern E lt ta ED List of Departments Employees z Emp Name 4 42 Az Title a w n z Departme Source Type Database Colurr i UA AutteA 000 A Ydepartmer Control Source amp emp name HAC AA title A A departme CNET emm A Alt emp name A A Alt title A A Alt depart TablejView No records found E l lt lt lt lt lt fPage Number of Total Pages gt gt gt gt gt JE Properties x EU naa EE Be List Box s department n s department r 1 k department id department name Design Mailyt Code Preview Live Pa
2. B B B B B B Bl E Ee tasks_list Br Header T T A H EE tasksSearch c ormEE8 EList of Tasks Properties F Format Data Events n E s Az Id a wn project E ss 42 priority a c z Status x al Sorter Eask id an 5l Sorter project a 2l Sorter_priarity Label project_id amp Ytask idt Al foraject_id project id id priority id A status project id Z Co ee ee E Source Type Database Colu pus H Sorter_status_ an E wf Sorter task n A AddNew lt lt Page Number of Total Pages 2 an 2 Sorter_user_ic E AA Footer H Format task id im zi Sorter user ic a1 Tere 2 2I Sorter date a m emb ane x 4 Sorter date n Bete HTML Code Preview Live Page DEFormat B edem ame mA task id A prajeck id te priority qd project name Generating Header Generating Footer ee tatus id UA i pgs Publishing page Header NE WE U ask name Publishing page Footer Field name or expression ta 4 Use as data source for label For Help press F1 Also change the value of the Data Type property from Integer to Text Prope tica x Now your page should display names of projects instead of their numeric ids EU mE Label projeck id Repeat above actions for the following fields priority id change to priority
3. Permissions for Internet Guest Account Allow Deny Full Control Modify Read amp Execute List Folder Contents Read Write a ngs EST IST RI LT EI OOOoOoOoO xj For special permissions or for advanced settings Advanced click Advanced For more information refer to http support microsoft com default aspx scid kb EN US q174943 CodeCharge Studio Tutorial 94 Appendix Common Errors HTTP 500 Internal Server Error This message is a friendly representation of a non standard error that occurred on the web server To see the full error message turn off friendly error messages in your web browser For more information refer to http support microsoft com default aspx scid kb EN US q294807 CodeCharge Studio Tutorial Appendix Common Errors 95 Page loads forever or the IIS web server appears to hang This issue is usually caused by Norton AntiVirus being configured to block script execution If you have Norton AntiVirus installed on your machine disable Script Blocking as shown below m Morton AntiVirus Options How to respond when a malicious script is found LiveUpdate Ask me whatto do recommended Stop all suspicious activities and do not prompt me Activity Log Miscellaneous CodeCharge Studio Tutorial
4. CodeCharge Studio Tutorial 30 Finalizing Task List Page Add ListBox Search Insert ListBox Control Type the text Project within the newly created left table cell then position the cursor in the right cell as shown then click Add ListBox icon in the Toolbox to add it to the page A TaskManager CodeChargeStudio File Edit Project View Table Tools Help ce Gt m amp Bs oe eB rre Noma Tahoma em B z u tS fete S SS Project Explorer tasks list x E amp A TaskManager A RE controls REA JE Common Files Header He El A ae A abi SEEN Fages A j oS Themes ENDS I i B mi ps emplovees list mE employees maint E Footer E ISF Header f EP Login fskeyword ss priorities list Cele ag priorities maint E E projects list amp ISP projecks maint SAB statuses Ist Graf moList of Tasks m BE statuses maint Ej ISP tasks list z d 4 z z project a 4 Priority a z 2 Status Error Add ListBox Properties xj EE os events __ gj Record tasksSearch Mame tasksSearch a Ea Header amp task idi amp project id A amp priority id A status connection H p tasksSearch Source Type H E tasks No records DataSource where ef Footer A Add New 4 2 Je lt lt Page Number of Total Pages gt gt m E tasks maint Fo ey mm El E EP Connections 1 s Design HTML Code Preview
5. Messages Publishing project Publishing page Default CodeCharge Studio Tutorial Finalizing Search and Grid created by the Wizard 79 Setup Search Parameters Go back to the page design mode then select the Grid component by either selecting it in the Project Explorer on the left or by positioning the cursor anywhere within Grid s caption on the page Then click on in the Where property of the Grid t1 Employee Directory CodeChargeStudio Project Explorer x Default xi troie Diecon e coneorents ta I Be Common Files PE ET E Pages E EMIT Themes E Bj os Default form Search H E dens Al Eg EEEE gt a Sorter titl S Sorter_de Select Value gt Value p amp l Sorter err 5 sorter ph fy z 4l Sorter ph t A emp nari x Agr esrar m fEmplbyees Properties x rema vete ees 00 Eg Grid departments emp departments emp 2 RR departme 4c Name 4 w z Az Title 4 w Az z Departmt i email a A phone ho amp femp name A A tile A amp departme x oA phone wc A alt emp name A A 4Alt title A amp Alt depar be A Al emp r P A Alt title No records found T SA Alt _deparl I Pe be ee FMA KRaanalaekLksoekt 4Taoatsb Manne L be sA Alt email 1 Pen A Alt phone Design atio peee Ea EE be A Alt phone i p 2 Navigator uice ps B d M ee Publishing pro
6. S Page tasks list 2 E HS E _ uda e Projectid v priorityIda w s st Restricted at statuses main Access Denied P 2 tasks list ACttask idi AYproject_id A A priority iA ES st convert URL To j pe Header No records Includable Fe tasksSearch SSL Access Onl RI i tasks A AddNew 4 2 Je lt lt Page_Number of Total_Pages a PO bee hf Footer ES ER Footer m a tasks_maint E 4 k B EP Connections F3 IntranetDB Design Balls Code Preview Live Page Messages Generating Header Generating Footer Publishing page Header Publishing page Footer CodeCharge Studio Tutorial Finalizing Task List Page 15 Test the Page Click on Live Page tab to view and test working page You should notice that some of the grid columns contain an ID of entities such as projects priorities and statuses while other columns such as User Id Assign By simply may not be needed TaskManager CodeChargeStudio File Edit Project View Table Tools Help JD ue d c X Se oe eh Ce 3 eee T les e 4 fatty Aocalhost T askManager tasks_list asp Project Explorer xj tasks ist x f Toolbox TaskManager Components lesrire Mad a El Common Files Employees Priorities Projects Statuses Tasks ni a S P Pages Search Tasks E Ge ce Ur i Themes H H E
7. ES Components Contrals H jal ta dmm FE a GE Dy Properties x Format s events _ Page NewPagel Restricted No AcessDene 0 Convert URL None dude Wo 55L Access C CodeCharge Studio Tutorial 70 Finalizing Search and Grid created by the Wizard Finalizing Search and Grid created by the Wizard Wizards allow you to quickly add components to your page although often you still may need to manually finish configuring some of the controls or extending application s functionality In this section we will perform additional tasks to complete the Employee Directory CodeCharge Studio Tutorial Finalizing Search and Grid created by the Wizard 71 Rename the Page First let s change the name of the page to a more appropriate name Right click on the existing page in Project Explorer window then select Rename option A CodeChargeStudio Components Controls H ea Fa 2 4 Employee Directory E Common Files Ere Pages c En e H E dep La Open Employees e m j EF dep _ lt lt lt 9 aaa EE Connection a Publish Pus Emnl AE Open Externally is emp name ame Jis department na mel 2 Delete Close Properties Jion E ET List of Departments Employees DTE xl E x Emm Page NewPagel Restricted Mn 4c Emp Name a zTitle 4 482 z Department Na amp emp name A ftiley A amp department nar A
8. Introductory Tutorial CopsCHAncEEMHBIS Information in this document is subject to change without notice Companies names and data used in examples herein are fictitious unless otherwise noted This document can be reproduced by anyone for any purposes in its unmodified form Modified versions or parts of this document may not be reproduced or transmitted in any form or by any means electronics or mechanical for any purpose without the express written permission of YesSoftware Inc 2002 YesSoftware Inc All rights reserved CodeCharge Studio Tutorial Contents Introductio eec ENTE 1 Chapter 1 Creating Task Management System with Power Wizard 2 Using Power WIZQGLIG ii cossussueevasuesEuvEVENISSEERVEVERSRREEVERSQERAEEVERRESEEERERRRRRRR IR CREE RI E VEEARDERSRESEKFEEEEEEE Create New Project Configure Site Pages ang ened ce et te e cy tondeucp ee soto nor tin esci pase ReaR rst f eli le em 10 Specify Site Layout and Menu J LL LLL Tl Select Site Theme J 2 1 1 LLLLLLLLLLLLLLLLLLLLLLLLLLL 12 Review Pages and Create the Site 13 Finalizing Task List Page Ens Eae ou Va xe owEako Kodex E EUEUREERQAR MEAE VEREEUE a Ea Kie KENT IUE 14 Open Task List Page ooo nt cue De ere e ee ee LAE Ret iT e ma ur e 14 Test the Page 2 2 2 2 2 2 1 LLL LLLLLLLLLLLLLLLLLLLLLLLLLL 15 Delete Unneeded Columns 2 LLLLLLLLLLLLLLLL 16 Change Texts and Captions LL LLL 17 Launch Data Source Edit
9. z Ma records found message No records found Cancel Back Next n Preview Finish CodeCharge Studio Tutorial Creating Grid with Grid Wizard 67 Select a Theme for the Grid Select one of the available themes for the grid Setup other grid options such as the Style Type and Grid Layout B Grid Form Wizard S mE x Select a Theme for the Grid Preview ee Emp narm a Department Name s departmer _departmer HappyFumpkin InLine Mailbox Swletpe CSSFile List of Departments Grid layout Tabular Employees Emp Mame w Titlles v v Altemate records z JTamn namat Site Record Separator 4 k Cancel amp Back Hext gt i Finish Style Type The type of the HTML compatible style to be used on the page This may be either HTML itself or CSS Cascading Style Sheets If you choose to use CSS specify if you want to generate single CSS file for all pages CSS File one CSS file for each page CSS page or CSS embedded within the HTML CSS Inline Grid Layout Tabular standard grid that looks like a table or spreadsheet Columnar alternative grid type for newspaper column type list of records Justified another alternative grid type Alternate Records Whether even grid rows should have a different shade background than odd rows Record Separator Whether grid records should be generated as separate tables which allows for additional flexib
10. Alt emp name A A Alt tile A amp Alt department No records faund ConvertURL None Includable Wo SSL Access C Nn Fry je lt lt lt lt lt fPage Number of fTotal Pages gt gt gt gt l i 4 t Design aty Code Preview Live Page Messages AN Publishing project Publishing page Me Page T EJE 4 For Help press F1 You may also rename a page by clicking on its name in Project Explorer and pressing F2 CodeCharge Studio Tutorial 72 Finalizing Search and Grid created by the Wizard Type the new name for the page to replace previous one A CodeChargeStudio Deug o c 8 m E Sra PEL Normal Tahoma i 8 pt B 7 U i tE d j Project Explorer X Default x Tni II Mi Uh xj Ls Employee Directory zm Components ETE be E Common Files m am A E B il Pages E H E departments earch Departments Employees ES EF departments Sec e Connections i xs Le t3 Employees Department Name s department name E sern tonka EDList of Departments Employees v Emp Name a 2 zTitle 4 4 4 Department Na DEN Data eo amp emp name A A ftiley A A fdepartment nar Page Default z gt Restricted N A Alt emp name A A At tile A A Alt department No records found None jg lt lt lt lt lt Page Number of Total Pages 22 gt gt 21 gt 1 il Seed 4 k nee MEE Desion HTML
11. Header HB E E f tasks_list PO be 5 Header Search Tasks H EB tasksSearch k T E tasks ae T Sorter _task_ bee S Sorber_projes be 2l Sorter_priorit us fs keyword 000 hen amp l Sorter skakur aod Sorter task Data Properties x S Sorter user tonka Ed List of Tae Label user id as z A 1 me Sorter user pu 5l Sorter dabe x amp l Sorter _date_ Mame user _id _assic Source Type Database Co Contral Soure user_id_assic p an EN B task id A roe idi A CA EY status id Z A task id Na records sis Data Tre Integer project id Format A priority id A Add New amp 20 pe lt lt iPage Number of Total Pages gt 2l 5i A status id CE Footer 2 HTML No oo AL task name 7 T DBFarmat co AL user id assic m A user id assic A date assign oof date resolve 2 A tasks Insert Design HTML Code Preview Live Page Messages Generating Header Generating Footer Publishing page Header Publishing page Footer Ip xf For Help press F1 CodeCharge Studio Tutorial 18 Finalizing Task List Page Launch Data Source Editor Now use Data Source editor to specify additional tables to be used in the grid First select the tasks grid in the Project Explorer then click on the Here you can specify additional tables to use in the grid such as priorities table containing priority names and statu
12. COMMON EIOS sccacnaincsscaeccesavaeccnasrnnesecutsGecnencseannance cagueadsensescsnwmecens 92 Operation must use an updateable query Microsoft JET Database Engine 92 Microsoft JET Database Engine 0x80004005 Could not use file already in use 93 HTTP 500 Internal Server Error LLL LLLLLLLLLLL 94 Page loads forever or the IIS web server appears to hang 95 CodeCharge Studio Tutorial I ntroduction Welcome to the Introductory Tutorial on rapidly creating web applications with CodeCharge Studio You will find that CodeCharge Studio is not only easy to use but it is a vital and powerful code generator for visually creating professional web database solutions The tutorial consists of two chapters each designed to take you through different approaches to creating web applications from scratch It is assumed that you have some knowledge of database and web servers and it 1s required that you have a working web server such as IIS or PWS for Windows or Apache for Linux already installed and configured For the purposes of this tutorial we recommend using IIS or PWS server for Windows CodeCharge Studio also comes with sample MS Access databases that can be used during the course of this tutorial If you run into technical difficulties refer to the Appendix section for help and possible solutions CodeCharge Studio Tutorial 2 Using Power Wizard Chapter 1 Creating Task Management System with Power Wi
13. Code Preview Live Page EE ae Messages Publishing page Mew Pagel Generating Default CodeCharge Studio Tutorial Finalizing Search and Grid created by the Wizard 73 Change the Size of Search Fields Since some of the fields may be unnecessarily long click on the field and adjust its Format Properties for example by changing the size from 50 to 30 A CodeChargeStudio File Edit Project View Table Tools Help In EG o B3 E S Ce o s RD J ABe zu io l LEI Irt I AL TH Ii Mil Uh Default E E Employee Directory be E Common Files E 5 n Pages m ES Default E E departments E Fa departments e Connections Le t3 Employees 1 Publishing page MewPadge1 Generating Default torn Search Departments Employees 5 lise mp_name J s department na me E searen Department Name orm E ELList of Departments Em loyees z Emp Name r x Amo Az 4 Title pU i An Az Departmer A femp name A A title A departmer A Alt emp name A A Alt tile A Alt depart Norecordsfound 000000 EE le lt Ex lt lt Page_Number of Total Pages gt gt gt gt ei Design s Code Preview Live Page Messages Components elke Properties xj Format BEER RN lt INPUT gt Properties al autocomplete KnockoutInput dir ooo LE disabled id lang language maxlength 5
14. Data SQL CodeCharge Studio Tutorial Finalizing Task List Page 25 Return to the Grid The Data Source window now lists several tables previously selected in the Visual Query Builder Click OK again in the Data Source window to return back to the page design mode E Data Source Connection IntranetDB zi Refresh Data Source Type Table Test Review Data Data Source Tableview tasks employees priorities projects statuse Where t ask name contains like 4 0 4s keyword ar ask desc contains like 25 25 s_keyword or ask resolution contains like 6 26 s keyword fano A Order By DO O OL OF Cancel CodeCharge Studio Tutorial 26 Finalizing Task List Page Update Control Sources Select project id field by selecting it in the Project Explorer or by clicking on it within the page design area Then change the value of the Control Source property from project id to project name A TaskManager CodeChargeStudio File Edit Project View Table Tools Help Oe A aloe Ge AE amp 3e Normal Tahoma j 4t1400 E Z U i E t Project Explorer mum x Sl employees_maint Components Bez ey bane IH Footer rg FER s depo dei S Header Header e en EZ IH priorities lisE SF priorities maint m IH projects list pen projects maint Ms skeywordh 000 SI statuses list IH statuses maint
15. E projects_maint m Components Rss nia H 6 statuses list TAM EM mS shatuses maint EE tasks lisE GS Bj 0 AR Header Eg tasksSearch Fl Eg tasks Be al Sorter _task_ic 2 2L Sorter prajecl pen l Sorter prioribs in 2l Sorter skakus ui sl Sorter _task_n 2 Ss 2 Sorter user ir i 3 ml z Namea w z zUserId Assign By z User Id Assign Toa e 2 Sorter date 2 Source Type Tvpe Z sorter date r amp ftask name A A user id asslgn byl A amp user id assign to 4 Properties A task id Data Type m JA project id Format HA priority id co A status id oo fy task name L ve JA user id assigr 1 E gt en co AL user id assigr Design HTML Code Preview Live Page IEEE A date assign SS HA amp AR IEEE M A date resolve Messages ERR Generating Header Generating Footer Publishing page Header Publishing page Footer T A tasks Insert X Navigator Pe Footer 4 For Help press F1 CodeCharge Studio Tutorial Finalizing Task List Page 17 Change Texts and Captions Use the design editor to modify some of the texts appearing on the page Change Project Id to Project Priority Id to Priority Status Id to Status User Id Assign To to Assigned To A TaskManager CodeChargeStudio F amp F projects maint H E statuses list EISE statuses maint x P Components Emm tasks ist
16. Grid with Grid Wizard Grid Wizard creates grid table section on your page which then can be used to display database rows Launch Grid Wizard Click the Grid Wizard icon in the Toolbox to start Grid Wizard Select an existing database connection or create a new one then click Next Y ou may also select one of the example databases included with CodeCharge Studio Internet or Intranet A CodeChargeStudio lel xi Du Bl GI o c cs 6 9 b co 3 s e e D leo e Normal Times New Roman 2 2p B Z U F NewPagel x Eig Employee Directory ra Components Controls H be JE Common Files El Grid Form Wizard D e e des B Pages ig o Sl NewPagel Specify a database connection to be used during the ine c e Grid Wizard i eg Connections design process Bese fa Employees f Use an existing database connection Employees C Use a new database connection reate nr select a sample database Properties x Format E events Page NewPagel Restricted Wo Access Denie Convert URL Mone Includable No SSL Access C No t ntermet Database Intranet Database For Help press F1 CodeCharge Studio Tutorial 62 Creating Grid with Grid Wizard Launch Visual Query Builder A Grid Form Wizard j To aid you in the process of selecting database tables and fields to be used in the Select a Data Source and fields for the Grid grid CodeCharg
17. is eosas E xe EOD NEU VS OUO EE A UK IR OR ICRAUUR BUE RR 42 Create New Project LLL 42 Create Blank Project ieri nel orsi Se sum mo 2 2 emer peser D Po ele op o er e eeu 43 Save Newly Created Project LL LL LLL 44 Specifying Project Settings isses ua iua KERXERXEREFEEENEEEuEFENKKvEERENEEERERENFREFERENKEEEREFENKRVEFRENKE E aa 45 Open Project Settings LL LL LL LLLLLLLLLLLLLL 45 Specify General Project Settings LL LLL 47 Enter Publishing Settings LL LLLLLLLLLLLLLLLLLLL 48 Create Database Connection s for the Project e eases i i itl 49 Setup Security Settings forthe Project SL 50 Configure Security Groups forthe Project eeeseesesa isai i i i 52 Creating Database Connectlion 25 ps nasse uu dewecs nian anaa aaa 53 Create an Initial Database Connection 53 Build Design Connection LLL 54 Specify Data Provider JET ODBC etc LLL 55 Specify Connection Parameters Database Filename 56 Test Database Connection a LLLLLLLLLLLLLLLLLLL 57 Complete the Build Process of the Design Connection 2 22222222S 58 Setup Server Connection ieee LLL LLLLLLLLLLL 59 Save Project Settings eee 1 LL LLLLLLLLLLLLLLLLLLLLLLL 60 Creating Grid with Grid Wizard 5 eiisuux o xxu noa Ex o seosaExCEE UAR REM eru WAVE WRESESSVACE EP EERUE EMEN MES 61 Eaurici Gra Wizard oce a a etre er ett erret ut perm caret resi ie eere tae opor ee in 61 Launch Visual Query Builder LLL LLL
18. ise Table User ID Field Page used for redirection in case of denied access Generating Mew Padgez Generating Login Page saved CodeCharge Studio Tutorial Protecting Web Pages from Unauthorized Access 89 Select the recently created Login page as the main login page for the project Themes S s Default ccp My Recent Login ccp Documents giz Deskto p My Documents Mo Computer A cem Mu Network File name Login cop Files of type CodeCharge Page ccp Cancel j o CodeCharge Studio Tutorial 90 Protecting Web Pages from Unauthorized Access Restrict Page Access Now you can use the authentication feature by configuring restricted access to your pages Select the Default page in the Project Explorer then click on the button next to the Restricted property Once a new Page Security windows opens up specify all user levels that should be able to access this page If you specify all user levels all users will be able to see the page but first will need to login to the system via the Login page t1 Employee Directory CodeChargeStudio D MO o e Se ISSS S e Norma Tahama jgn4 B z u Default x Eig Employee Directory ES Components Bess bellu fe Common Files El Ed Pages AA e Page Security Groups 5 San rese Eg department Error IY Restricted EE department EE Login Egg Co
19. work phone cell project id task resolution user id assign bv user id assign to date resolve Review Data SQL OK Cancel CodeCharge Studio Tutorial 22 Finalizing Task List Page Define Table Relations Now define relations between remaining tables in this case employees and tasks by dragging the foreign key field user id assign to from tasks table to employees table the tasks table B Select Query task id project id priorities A priority id a d i lgroup id riority id i l E pes a department id task resolution statuses user id assign by status id i status name date resolve Review Data S L CodeCharge Studio Tutorial project id task resolution user id assign by date resolve You should then see all tables being connected to emp password emp name title group id Finalizing Task List Page 23 Define Field Joins Although not necessary in our case you may also define Joins between fields by double clicking on each of the lines that connect the tables then specifying that you want to display all records from tasks table and matching records from related tables If you do not do this the page may not display all records for example if you have a task without any priority or status assigned to it B Select Query ey E X projects E project id project name B Joi
20. you use numbers as your Group IDs you may Select the option Higher Level Inclusive of Lower Levels which will cause the generated programs to assume that users with higher security level can access pages with lower security levels For example users with level 4 will be able to access pages with level 3 but not 5 Creating Database Connection 53 Creating Database Connection Create an Initial Database Connection Right click on Connections in Project Explorer window and select New Connection A Employee Directory CodeCharge Studio ll File Edit Project View Table Tools Help Toolbox Forms EL S Employee Directory bes S Common Files a Pages e ld a CJ E r8 FE tg FW GE uj qum y Connection Format PEE Events 00 Design HTML Code Preview Live Data Messages For Help press F1 CodeCharge Studio Tutorial 54 Creating Database Connection Build Design Connection Enter the name for your connection then click Build to specify connection parameters El Add New Connection Eu 1 x Design trenei Es 7 a Connection Name EMAA Database MS Access Use ODBC Data Source Mame f Use Connection String Bl User Name User Password OF Cancel The Design Connection is the database connection utilized by CodeCharge Studio which will allow you to select database tables and fields in various places
21. 0 name s emp name For Help press F1 CodeCharge Studio Tutorial 74 Finalizing Search and Grid created by the Wizard Create ListBox Field ListBox fields are drop down menus that display values from the databases Since in the Grid Wizard you specified just the department name field without configuring it as a ListBox you now need to add ListBox to your Search component and configure its Data Properties Right click on the department name TextBox then select Change to gt ListBox This action will change your TextBox to a ListBox A CodeChargeStudio File Edit Project View Table Tools Help x Toolbox LEE E a e ce Bw J Edit Text Bos amp department name is department Rename Text Box s department name Department Name Default EE departments emp i Fe departments empSearch onnections Employees Change to ab Cut Text Bas department name Hidden L Ee Copy Text Box s department i Ea Tent A aka ESList of Depart ope Text Box s department name eal Test Area Delete Test Bos s department name Iv Check Box 5z Emp Name a 42 42 qj EB F Cut amp femp name A A dt Radio But n x F apu A Alt emp name A A qi n A Link deu No records found E eee Image m le lt lt lt lt Page Number lt BOD gt Properties Image Link
22. 62 Specify Database Fields in Visual Query Builder esses OOO 63 Select Database Fields for Grid Data Source ees OO 64 Setup Search Form to be used with the Grid OO 65 Define Grid Sorting and Navigation J LL LL LLL 66 Select a Theme for the Grid LL LLL LLL 67 Preview the Grid ance sos npoye ness ene hae fee penn etn ee PAE oer en Sep et eg ee np 68 Save Pr ject o a ee 69 Finalizing Search and Grid created by the Wizard eeeee nennen 70 Rename the Page oot etse fett ues tela tate tet atm OE urat us cte tuu iat 71 Change the Size of Search Fields LLL 13 create LISEBOX FUG c osos fuer a ect ae ae t em emu tn ea aee ee Sng se tg te ee 74 Configure ListBox Field LL LL LLL LLLLLLLLLLLLLLL 75 Change Field Captions LL LL LLLLLLLLLLLLLLLLLLLLLLLL 76 Publish the Page 2 2 2 2 1 e SALLLLLLLLLLLLLLLLLLLLLLLLLLLL 77 Review and Test Published Page Z Z2 22222 78 Setup Search Parameters Z 2222222222 79 Preview and Test the Project 2222222222 82 Protecting Web Pages from Unauthorized Access rre 83 Launch Login Logout Wizard 83 CodeCharge Studio Tutorial Run Login Logout Wizard eee 85 Specify Login Form Options LLLLLLLLLLLLLLLLLLLLLLLL 86 Select a Theme for the Login Form LL LLL 87 Specify the Login Page forthe Project eee 88 Restrict Page Access eee 90 CONCIUSION sonaa ina sscuumereueunenessanessuweredeuwnas mares E a 91 Appendix
23. Eg Grid depart Tim Leist Developer Software timl campany com G64 345 5267 E EE EC Developer Software pablosiicompany com asa 222 2287 Dawid ES ir Developer Sofware davids company cam Li Jang Developer Software lij company com 364 354 2646 ob I l Sr m 1a ac l lel rmm ena mama a can bs 4 445 TI ot 4 Design HTML Code Preview Messages Generating Default Publishing praject ae Publishing page Default TablePview 4 SQL statement Done CodeCharge Studio Tutorial 92 Appendix Common Errors Appendix Common Errors Listed below are common issues and errors with running ASP applications on Windows servers Operation must use an updateable query Microsoft JET Database Engine This is one of the most common ASP errors that occurs when the data is being updated in a Microsoft Access database that doesn t have sufficient access privileges Solution In Windows 95 98 or ME Right click on the MS Access file mdb and uncheck the Read only property In Windows NT 2000 or XP Ask your system administrator to setup full access permissions for the anonymous user IUSR to access the database If you are hosting your website externally your web hosting company most likely provides special read write folder for databases or will create one for you Please check the FAQ and other information on your hosting company s website or contact them directly For m
24. If you are just starting with CodeCharge Studio skip this step and click the OK button to complete configuring Project Settings EJ Project settings Project Publishing Connections CodeCharge Studio Tutorial Specifying Project Settings 51 If you are ready to configure your site security enter appropriate information as shown Login Page The page where users will be redirected if they are not logged in or their access permissions are insufficient to access a page within your site This page must to be created before you can start using the authentication features EJ Project settings Project Publishing Connections Security Security Groups Security Method C None Table C Database Login Page El UserID Stored As Session Advanced Connection Employees vj User T able lemps ss sj User ID Field lempid amp Login Field lemplogn Password Field lemp_password LevelGroup Field lemplevel LK Cancel User ID Stored As The method of storing user IDs which could be a cookie or session URL authentication is also available which converts all URLs and appends a special URL parameter that tracks users Connection Database Connection that contains user login information User Table The table that contains user and login information User ID Field The key field in the user table which will be used as user s unique id Login Fiel
25. Live Page Restricted Custom Inser Generating Common Files Generating asks list Publishing project Publishing page tasks list For Help press F1 CodeCharge Studio Tutorial Finalizing Task List Page 31 Add ListBox Search Set ListBox Properties Configure ListBox properties by clicking on it and specifying required values in the property editor as follows Name s_ project this name later will be used as a variable name that contains selected value Connection ntranetDB database connection to use for retrieving ListBox values List Data Source projects table containing ListBox values Bound Column project_id table field whose value will be used as the search parameter Text Column project_name table field whose value should be used to populate the ListBox Data Type nteger type of the value that will be used as the search parameter project id 1s numeric A TaskManager CodeChargeStudio IS p I Jr T a B ru 7 Project Explorer xj tasks list Es TaskManager m El Common Files Header FH 5 ap Ages 4 Themes E 9 employees list form Search Tasks mE employees_maint Erot 00000000 re IS Footer GSE Header MM Select Value H E Login fF priorities list C c keyword mE priorities maint H S projects list ETE ES projects maint H E statuses_list eren E statuses maint stoam Ex List of Tasks x Tesbo 1 ET z SERERE
26. T Components KeA El Common Files Ec Pages E3 e Themes Em F ISF Default Eg Connections bee fa Employees Properties x EE oss EE Page Login Restricted no Access Denied Tncudable No 55L Access Ono Co i o Design HTML Code Preview Live Page Messages Generating MewPage2 Generating Login CodeCharge Studio Tutorial Protecting Web Pages from Unauthorized Access 85 Run Login Logout Wizard Click on the Login Logout Wizard icon in the Toolbox window Once Wizard window opens select Login Form and click Next le Employee Directory CodeChargeStudio Project Espina E u Default Lc pa El a Employee Directory be ll Common Files B 4 Fage Themes man Default B e Connectors ben 3 Employees Select the authentication feature to be added E Properties Format Data Is Edge Login Restricted Convert URL Te ncludable al SSL Access Onl Bj I 4 zu Len HTML Code Preview Live Page aS m SEITE TEE R 2 0G Generating Login CodeCharge Studio Tutorial 86 Protecting Web Pages from Unauthorized Access Specify Login Form Options Select Focus on Login field option if you like to generate JavaScript that will cause the Login page to always open in the browser with the Login field in focus This will allow
27. TaskManager CodeChargeStudio File Edit Project View Table Tools Help Du WO o m eth co deals Normal EE ali 8 pt BE ZU i t E Project Explorer B Sd f tasks list E TaskManager ES Edit Record tasks earch EA mm ue jl Common Files yea der Kee fal Rename Record tasksSearch A Slas AT u De Cut Record tasksSearch oy 5E dx Themes ER ESF Iv 9 EB 3 E di i L LI 1 H E employees list Copy Record tasksSearch MEE cga employees maint mE Footer H E Header cga Login H 6 priorities list mI priorities maint Error OR Delete Record tasksSearch Project Select Value zl Eut Copy s_keyword Faste F projects list Insert Row H ek projects_maint ef sbskcuses list zi Move Row Up Alt U p EH E statuses _ maint F orm Fa ERE List of Tasks 3 7 Mov ve H lal D OIF Al re D omn FE Record tasksSearch E RF tasks list Az qd A y z 4z Project P Delete Aow tasksSearch a Bill Header Connection A 1 ico e A A j i F E Fe tasksSearch gtask ipe tproject_id Insert Column Source Type Table fbi s keyword No records Delete Column Data acirc E DoSearch wh ACAdd New 4 2 e lt lt ff En X EB amp project nc Su Split Cell Order E By H gj tasks 1 SS Return Page tasks _list ccp 01 B Footer Design Baba Code Preview Live Pa lt BODY gt Prope
28. at O Format zl And Or AND v Default Value PO CodeCharge Studio Tutorial Finalizing Task List Page 37 View Working Page Now your first page is completed You can search and view list of tasks as well as sort them or click on a task to view more details When finished viewing the page click on a Task Id for any of the tasks to test other pages A TaskManager CodeChargeStudio File Edit Project View Table Tools Help az a Osmate X Es mle tes et S o Ie lh ttp localhost T askManager tasks_ list asp ccsForm tasksS earch e Project Explorer XI tasks list x Eig TaskManager ve JE Common Files EH Pages z EET cones fut Sj A fai b Ve EB Ee amp Employees Priorities Projects Statuses Tasks Themes SF employees list DE rch pu SI employees mair p E SF Header TE Login C R CodeCharge ST priorities list 8H priorities maint E EP projects list Properties x a L E projects main Properties 4 statuses list List of Tasks red B Bm SF statuses maint Id Project Prinrity Status Mame Assigned To zz i z PoR rol Highest lOpen Fix ALL bugs Stefan Fey ll NNNM asks main Connection InktranetDB Connections Add New lofi l Source Type Table Data Source tasks employe Where Order By E Restricted Mo KE ers M ESTE Live Page Records Pe
29. controls RUTN Sj A abi st iv cC EB Ee amp A E zl ES o CES Be List Box s_project E tasks list Ac a y oz Project A wm hm z priority z 42 Stati Name s project NE S Header Caption AC ES FA ES E EB cg tasksSearch A task idio JA project iA A priority id A stab Source T mE Oalsoece call 4B s project Ma records Control Source abi 5 keviwort AY Connection I t tEDB Add New 4 2 Je lt lt Page_Number of Total Pages gt gt pE O Cm poseer lz i ge i etu i nm List Source Typ Tables view E H tasks 4 4 List Data Sourd projects i Se Footer Design HTML Code Preview Live Page Bound Column project id G 28 Lasks maint Tex ius ur project nan E PN Connections Measann EN m Publishing page Header der By project id Publishing page Footer iios Dina ALLE hd Generating Common Files Generating tasks list o Ble Mame of the data source field a that contains the value ta be CodeCharge Studio Tutorial 32 Finalizing Task List Page Add ListBox Search Move Table Row Finally move down the table row containing the ListBox by right clicking near the ListBox and selecting Move Row Down You can also do this by positioning the cursor next to the ListBox and using keyboard keys ALT Down Arrow A
30. ction If using ODBC or other provider select the DSN Data Source Name or other parameters needed to establish the database connection Add New Connection Design Bs beter ae Connection Mame Database MS Access Use ODBC E Eater agitate Provider Connection Advanced All i Use Conner Specify the Fallewing to connect to Access data 1 Select ar enter a database name User Name User Password Sy ceteenecnenenaenraenenaenenaenenan Emplovees mdb My Recent Documents Deskto p Ds a rd hy Computer hy Network File name Employees mdb Places Files of hype Microsoft Access Databases mdb Cancel E CodeCharge Studio Tutorial Creating Database Connection 57 Test Database Connection Click Test Connection to check if the connection to the database can be established C Databases E mplovees mdb 3 Easswondi Microsoft Datalink CodeCharge Studio Tutorial 58 Creating Database Connection Complete the Build Process of the Design Connection Confirm that the connection string was created in Use Connection String field then select Server to create server connection E Add New Connection Embes 0 MS Access m CodeCharge Studio Tutorial Creating Database Connection 59 Setup Server Connection Specify that the Server connection is the same as the design connection A Add New Connection Mh sa Serve
31. d The field in the user table that contains user s login Password Field The field in the user table that contains user s password Level Group Field The field containing user s security level or group which will be used to verify access authorization In addition levels or groups should be configured on the Security Groups tab CodeCharge Studio Tutorial 52 Specifying Project Settings Configure Security Groups for the Project El Project settings i 3 X Project Publishing Connections Security Security Groups Security Groups User 2 Manager A Add Security Group n b x Group ID E umm Group Mame Administratol E Higher Level Inclusive of Lower Levels A Project settings a X Truy eae a a E n eee ee Security Groups Security Groups Add 1 User Manager Modify H Administrator Remove a Cancel CodeCharge Studio Tutorial Click Add button to create security levels or groups that will be used for page authentication The security groups specified here usually should match levels or groups in the table specified on the Security tab However you may also configure additional groups that will be available in the future or you may configure groups that exist in other tables or are programmatically assigned When later restricting page access CodeCharge Studio will allow you to select any of the groups configured on this screen If
32. during the project building process This connection can be different from the Server Connection which is used by the generated programs CodeCharge Studio Tutorial Creating Database Connection 55 Specify Data Provider JET ODBC etc In the Data Link Properties select Jet 4 0 as the Provider which will allow you to connect directly to a database file such as MS Access mdb You may also select ODBC or other specialized drivers to connect to a variety of other databases A Add New Connection Design Brus Est Connection Name Jine DT Database MS Access C Use ODBC CEREA agg er Provider Connection Advanced All Use Connect Select the data you want ta connect to OLE DB PFrevider s a Lh te x Lic n z EET S Microsoft 54M 1 1 OLE DB Provider Shui Microsoft Jet 4 0 OLE DB Provider ae d Microsoft OLE DB Provider for Indexing Service Microsoft OLE DB Provider for Internet Publishing Microsoft OLE DB Provider for ODBC Drivers Microsoft OLE DB Provider for OLAF Services Microsoft OLE DB Provider for Oracle Microsoft OLE DB Provider for SQL Server Microsoft OLE DB Simple Provider MSD ataShape OLE DB Provider for Microsoft Directory Services OF Cancel Help CodeCharge Studio Tutorial 56 Creating Database Connection Specify Connection Parameters Database Filename If using JET provider select the database file to be used for this conne
33. e Studio Tutorial 12 Using Power Wizard Select Site Theme Finally select Knockout theme to apply to the site which the Wizard will then utilize to apply specific fonts and colors to each page A Power Wizard title CodeCharge Studio Tutorial Using Power Wizard 13 Review Pages and Create the Site Click Finish to let the Wizard create all pages and publish the site A Power Wizard Power Wizard has finished collecting the information CodeCharge Studio Tutorial l4 Finalizing Task List Page Finalizing Task List Page Although Power Wizard can create simple web applications usually you will need to modify and extend the functionality created by it For example you may want to change texts and captions remove some of the grid columns add additional search fields and listboxes etc In this section you will learn how to do just that Open Task List Page Click on the sign next to page name to open it for modifications A TaskManager CodeChargeStudio Project Explorer xi tasks st x x gi pin Components ISS na e Common Files E zng ET Es gt ta tat Pie 55 m Pages a a 17 Themes Ez ng P employees list employees main MEER Sf Sl Footer SF Header muewlikwed SS fs keyword 00 Login ST priorities list ETE E priorities maint SF projects list projects maint orm Eg Eg List of Tasks E oats ET
34. e Studio includes Visual Query Builder Click Build to access it Record Source Refresh Available Fields Fields for the Grid Order by none v none Cancel Back Mest gt Preview Finish Secs 7 i fo xj Select the following tables to be used as the i data source for the grid departments employees E Select Query ve E X Click Add when completed Review Data n Cancel CodeCharge Studio Tutorial Creating Grid with Grid Wizard 63 Specify Database Fields in Visual Query Builder Set the checkboxes next to all database fields that you like to include in your grid For this tutorial select the following fields emp name title phone home phone work email department name in departments table Select Query ve ER OX department id department name deparkment id iphone heme iphone work phone_cell Jfax Iv lerail E alll Review Data Cancel CodeCharge Studio Tutorial 64 Creating Grid with Grid Wizard Select Database Fields for Grid Data Source x Once finished using the Visual Query Builder the Grid Wizard will display all ES E Select a Data Source and fields for the Grid database fields available for inclusion in the grid Click on the double right arrow gt gt to i Refresh A Grid Form Wizard select all fields to be included Record Source departments emp
35. e hame phone wnrk email Control Type TextBox nd Cancel Back Next gt Preview Finish For each field you may specify its type by selecting TextBox ListBox or other control that will be used to represent this field We will use one TextBox field emp name for keyword search and one ListBox field department name for specifying the department when searching filtering the data ListBoxes require additional configuration therefore let s select both emp name and department name fields as TextBox for now in Control Type field and discuss this topic at a later time Click Next when finishing configuring the screen as shown above CodeCharge Studio Tutorial 66 Creating Grid with Grid Wizard Define Grid Sorting and Navigation Specify if users can sort the Grid by clicking on column headings and if users can navigate the grid by clicking on page numbers or First Last Previous Next page indicators Specify if sorting and navigation should be represented by graphical icons or plain text Additionally specify the number of grid rows to be shown on a page as well as the message to be displayed when no records are found A Grid Form Wizard H u xi Define Grd Form Options Sorting Fens Navigator C No sorting C No Page Navigator Caption Prev 3 Next C Caption w C f Caption wr ae fe le lt lt Gof 10 gt l Custom Modify Records per Page fi
36. e that the search doesn t work correctly at this time and doesn t search employee Titles or doesn t display results that match the selected department This happens because you specified only one field employee name in the Wizard then renamed it to Keyword but you have not specified which other fields you like to search by it Additionally you added a ListBox to the Search but you didn t specify how it should be linked to the search results shown in the grid Employee Directory CodeChargeStudio File Edit Project View Table Tools Help ID E E OE c ES ER Aili wire l Lx it ed ocaTostvemployeedi Defaut asp e Def ault dU ENS x 2 Components Merael a Je efau E departments empSearch PERETE tte ea Eg departments emp nnections Employees Name Title Department Email bo Kuch E software bobkacompany com Developer Connection l Source Type Table E Developer software davidsccompany com Data Source where John Smith Director Administration johns campany com Order By LiJang Developer Software lliggcompany com Return Page DeFault ccp E Lo HERREN Convert URL To None F Restricted Ma Custom Insert Typ Design HTML Code Preview Custom Insert SS A E E Update n Custom Update Custom Delete Ty dT CENE g Record departments emps departments emi 4
37. eb Pages from Unauthorized Access You may configure your project to utilize user authentication and protect certain or all pages from unauthorized access Once correctly setup generated pages will redirect users to the login page in case the user is not logged in or unauthorized to access a restricted page Launch Login Logout Wizard Create a new page then right click on it s name and select the Rename option t1 Employee Directory CodeChargeStudio Project Explorer NewPage Components Besse lsu se cs Cj bs Employee Directory bee El Common Files B ri a Themes EF ese i ak Tu severum La Open E Employe Generate Code Les Publish Format os Events Open Externally Delete E Page NewPage Close Restricted Access Denied m Rp ti raperties Convert URL Tc Includable SSL Access Only Design HTML Code Preview Live Page Generating MewPage2 CodeCharge Studio Tutorial 84 Protecting Web Pages from Unauthorized Access Change the name of the page to Login t1 Employee Directory CodeChargeStudio Eile Edit Project view Table Tools Help L Normal Times New Roman j 3 1200 BE Z U Ze 24 Project Explorer x Pee Login x f Toolbox x E gl Employee Directory
38. ecify the folder where CodeCharge Studio should output generated files during the publishing process E Project settings Project Connections Security Security Groups Local Network gt LM netpub suwroathemployeedir k http rlacalhost emploveedir Location The location can be either a local or network drive or an Ftp address on an external server Ftp is not supported in the Beta release Server Path The full path where generated files should be published Server URL The web address corresponding to the Server Path This URL will be used to view the page in Live Data mode CodeCharge Studio Tutorial Specifying Project Settings 49 Create Database Connection s for the Project If you haven t created a database connection described in the Create Database section click Add to create new database connection E Project settings X JN Click Build and follow the steps Project Publishing Security Security Groups described in the Create Database section to complete creating database connection s jubere Un m REMTE lest Once completed building the connection click on the Security tab CodeCharge Studio Tutorial 50 Specifying Project Settings Setup Security Settings for the Project Security settings allow you to protect specific pages from unauthorized access by directing unauthorized users to a Login page based on their security group or level
39. employees list employees mai m B Footer ff Header mE Login FEF priorities list mE priorities main EE projects list efe projects maint Properties EE os Events 1 Page tasks list H E statuses list i Restricted E SF statuses _maint Access Denier Er tasks list Convert URL None B Header Includable Na H Fig tasksSeard 55L Access O No ni H tasks C MEE 5r Footer H 2m Fasks main EM Connections s IntranetDB Design HTML Code Preview Live Fage E Messages Generating Header Generating Footer Publishing page Header Publishing page Footer http localhast TaskManager basks list asprtasksOrder user id assign by amp basksDir2asc CodeCharge Studio Tutorial l6 Finalizing Task List Page Delete Unneeded Columns Select unneeded column by clicking and positioning the cursor somewhere within the column then click on the Delete Column icon Use this method to delete the following three columns User Id Assign By Date Assign Date Resolve A TaskManager CodeChargeStudio File Edit Project View Table Tools Help Dra e c ER e te fe pm 0 9T les Se 8 ap Normal Tshoma ali 8 pt BH Z7 U gt 1 gt tE E m A Delete Column Project Explorer X tasks list 72 Toolbox x E
40. ery button A new window will open up that shows tasks table currently used in the Grid Data Source frends af Rae Table mj Tex Review Dats moo a un task id prajeck id Z Es E E I CodeCharge Studio Tutorial 20 Finalizing Task List Page Select Additional Tables Select additional tables that are related to the tasks table Hold CTL key when clicking on table names to select multiple tables at once and then press Add El Select Query B nus ial xl GE List of Tables T ables bugs project id departments Miroi ie cun E status id Ed E a priorities projects statuses Review Data SOL OF Cancel CodeCharge Studio Tutorial Finalizing Task List Page 21 Arrange Tables in Visual Query Builder Once multiple tables are in the Visual Query Builder drag tables and arrange them on the screen to see all information You will notice that some of the tables are connected This is because Query Builder recognizes relations between tables that have fields with the same names In this case both tasks and statuses tables have the same field name status id which makes it logical to assume that they are related B Select Query B Select Query 9s ES XC proja employees NH project id Llemp_id project name E emp login task id emp password emp name title lgroup id department id phone home phone
41. ge Messages Publishing page Mev Page Generating Default For Help press F1 Connection The database connection that contains the data for the ListBox List Data Source The table view query or SQL to be used to retrieve database records for the ListBox Text Column The database field whose values will be displayed in the drop down menu CodeCharge Studio Tutorial 76 Finalizing Search and Grid created by the Wizard Change Field Captions Adjust field captions created by the Grid Wizard by working within the HTML Design window and typing the new titles and captions as needed CodeChargeStudio A e E oe q qu m 3 gu 4 T bu Ll EN iti I n Il I il il Project Explorer Default x Toolbox E E Employee Directory m Components Controls HTL be El Common Files ES Ee ph gi Eg Pages a e G H a enit H FE departmer El E Connections bes fa Employees i Department select Value Bin E 538 Employees mfime ce gt epartmen Bee nameit A A title A ae na A Alt emp name A A Alt title A A Alt department No records found 82 pe e ce ce Page_Number of Total Pages gt gt gt gt gt 4 Design HTML Code Preview Live Page Publishing project Publishing page Default 4 t Page saved CodeCharge Studio Tutorial Finalizing Search and Grid created by the Wiza
42. harge Studio Tutorial 8 Using Power Wizard Setup Site Security and Authentication In this step you may specify if you want to use authentication and check users access privileges before allowing them to access certain pages Select Use authorization and leave all default options The Wizard will then create the Login page and will allow you to specify security level for each of the pages it is creating You may also add additional security groups levels or specify a different user table for authenticating users as described in chapter 2 Setup Security Settings for the Project Bj Power Wizard x D X EEN Use Group Access authorization i Securty Groups User Table lemployees Add User ID Field Jemp_id Modify Login Field emp login R emove Password Field emp p assword Level Group Field group id z V Higher Level Inclusive of Lower Levels Cancel lt Back Next gt Finish CodeCharge Studio Tutorial Using Power Wizard 9 Select Database Tables Select the following database tables to be converted to a web application employees priorities projects Statuses tasks A Power Wizard Generate pages with forms based on database tables and queries employees priorities CodeCharge Studio Tutorial lO Using Power Wizard Configure Site Pages Now configure your site by specifying options and security for each of the pages The Wi
43. ick the parentheses button to make the search of these two parameters independent from searching the department Your final Where Search parameters screen should look like the one shown here AND Order By Jemp_name ks OF Cancel CodeCharge Studio Tutorial 82 Finalizing Search and Grid created by the Wizard Preview and Test the Project As the final step click on the Live Data tab below the main window then test the page by interacting with it and testing its functionality t1 Employee Directory Codethargestudio Eile Edit Project view Table Tools Help ID us E OE x Es gm Re CS 8 wire Lx 5 http calhost emploveedir D efault asp s emp Project Explorer xl Default x f Toolbox Dan Directory ES Components Contr be Common Files PIE B rh Pages Search o BH Themes E E E Default B e Connections Bsn fa Employees Mame Title Department Email Home Phone Tim Leist Developer Software timl campany com 364 345 5267 eee Sanchez Developer Software pablosiicompany com eso 222 2287 Li Jang Developer Software lijcompany com 354 354 2646 Dawid p Developer softwar davids company com oo 523 2367 ml eal Isr nr Ree MES Mee Live Page 4 Messages Publizhing project Publishing page Default CodeCharge Studio Tutorial Protecting Web Pages from Unauthorized Access 83 Protecting W
44. ility in how the grid looks For example you may use the space between records to display additional information CodeCharge Studio Tutorial 68 Creating Grid with Grid Wizard Preview the Grid Click Preview button to see the draft HTML generated by the Wizard mm Name Department Name Ji men fm eme name mu cras ie TRE TEE SERES zl falter emp rame Halt _department_ name Halt t phone _home Halt phone _work CodeCharge Studio Tutorial Creating Grid with Grid Wizard 69 Save Project Click the Save All icon on the toolbar to save your project A CodeChargeStudio File Edit Project view Table Tools Help EAT o c 85 6 8 8 Co 9 P ERR TET Normal Save AI f 8 pt B Z U i Projeck Explorer EHE Employee Directory ps El Common Files Pages EHE MewPagel H E departments E E departments EES Connections an fa Employees x NewPagel TL Laie E sern E lt ta EL List of Departments Employees s Emp Name 4 v 2 zTitle v c Department Na A emp name A A file A A department nar A alt emp name A A Alt title A Alt department No records found Department Name 4 sree HTML Code Preview Live Page Messages Publishing project Publishing page Mew Pagel 4 4 Save all pages Er le lt xx lt lt fPage Number of Total Pages gt gt gt gt gt uias x EE mes x
45. ject M Publishing page Default ii Employees Standard WHERE clause appended to 4 SELECT statement Done CodeCharge Studio Tutorial 80 Finalizing Search and Grid created by the Wizard Once the Data Source window opens up you will see several parameters created by the Wizard in the Where section The two parameters there indicate that the Grid should be filtered by two keywords s emp name and s department name Both of those keywords come from the Search component and will be matched against emp name and department name fields from the database respectively However we would also like to search employees titles and since the department name was changed to a ListBox it will need an adjustment as well First click the sign to add a new Where parameter that will be used in the Grid Then select the field title and specify that it should be matched against the search parameter s emp name the same as used to search emp name As the Condition specify contains like so that all employee titles that contain the keyword s emp name will be retrieved Data Source mer VIDE m ERA o npleyeeses m Refresh Data Source Type Table Test Review D ata Connection Data Source T able iew departments employees Select Query Where emp names contains like 22 22 s emp name And department name contains like 5 75 s departmen
46. loyees Available Fields Fields for the Grid department name emp namse title phone home phone wnrk email Order nog v none Cancel 4 Back Next gt Preview Finish Bj Grid Form Wizard XI Click on up and down arrows to move fields mere and specify the order in which they will EN Select a Data Source and fields for the Grid appear in the grid i Click on Order by drop down menu and select the field that will be used as the sort Record Sauce cepartments employees Buid Rete h order for the grid For example if you select the field emp name by default the grid will be sorted by employee name Available Fields Fields for the Grid emp name title S Click Next when finished wm Ld 4 deparnment name di phone home phane work Order by emp name L ancel lt Back Preview Finish CodeCharge Studio Tutorial Creating Grid with Grid Wizard 65 Setup Search Form to be used with the Grid To make the grid searchable in this step add a Search section to the page Set the Create Search Filter form checkbox then specify fields to be included in it E Grid Form Wizard EU X E Select Search Form fields for the Grid optional Create Search Filter form nm Sorting list box Orientation Vertical Search Type AMD Records per page list box C Horizontal CDR Available Fields Search Fields title phon
47. n 2 2 2000 e Date Resolve 12 2 2002 Bx BL 1 4 mea e eee Live Page ae Ez E B CodeCharge Studio Tutorial 40 Conclusion Conclusion During the course of this brief tutorial you ve used Power Wizard to create a simple Task Management application Although many additional features and improvements can be implemented you should now be familiar with CodeCharge Studio s interface and many of its features Refer to the User Manual for more information Search List of Tasks i CodeCharge Highest Code with one hand IT M CodeCharge poer een Fix ALL bugs stefan Fey m nm High closed cet ready to click David Snyder CodeCharge Studio Tutorial Chapter 2 Creating an Employee Directory CodeCharge Studio provides all the tools you need to get started building your Web applications including Wizards for creating search grid and record maintenance sections In this chapter we will describe how you can utilize various wizards components controls and other features to create basic employee directory from scratch Since in this chapter we will not be using Power Wizard you will gain more insight into setting up project properties creating database connection and working with other features that extend your application CodeCharge Studio Tutorial 42 Creating New Project Creating New Project Create New Project Start CodeCharge Studio and select New projec
48. n Link tasks Condition employees Juser_id_assign_to equals emp id Join Type Inner Only include rows where the joined fields from both tables are equal Right Include ALL records from employees and only those records from tasks where the joined fields are equal Review Data S L OK Cancel B Select Query Oe E X projects project id project name task id emp password project id emp name priorities priority id jtitle group id department id phone home status id task name task desc task resolution O O user id assign by user id assign to date assign date resolve status id status name Review Data S L CodeCharge Studio Tutorial 24 Finalizing Task List Page Set Fields for Inclusion in the Grid Now mark fields to be included in the grid by clicking on corresponding checkboxes Include the following fields task id task name project name priority name Status name emp name Click OK when done E Select Query Ue ER OX lemp login j emp password ITI id IIprajecE name wiEtask id project id Cdepartment_id phane hame task resalution luser id assign bv luser id assign ta date assign date resolve status id status name Review
49. n the Power Wizard icon You can also select the Power Wizard icon once then click OK button to launch it MA cit LLL i LEJ ms LLL p PET g zH i ba pe Ee gt m red 37 g i H min LET a m ue dme s da um e E e EIE m in Y LEE DER Project Explorer z LI E Add Mew Project x Blank Project Power Wizard Properties TIT EMEN Events T ask anager C Program FilessCadeChargeStudiasPrajects amp 5P with Templates CodeCharge Studio Tutorial Using Power Wizard 5 Specify Project Properties Specify all parameters required by the wizard for generating the site Code Language Programming language or technology to be generated Currently supported technologies are ASP with Templates generates asp files with VBScript which uses separate html files as templates during the run time CH generates aspx files with C code CFML generates ColdFusion code CFML with Templates generates ColdFusion code cfm and separate html template files PHP with Templates generates PHP code php and separate html template files Servlets with Templates generates Java code that utilizes html templates Site Language Country language to use when generating text messages for the site For example the text No records that appears when no more records are to be displayed within a grid could be generated in any support language Database The database ty
50. name Properties Refresh CodeCharge Studio Tutorial Specifying Project Settings 47 Specify General Project Settings Specify the general project properties such as Programming Language and Date Display Format Project settings mes x Project BST E TP a Connections Security Security Groups Site Language Project Path C Program Files CodeChargedStudiol Projects Employee Directory Employee Directory ces OK Cancel Language Currently generated programming languages are ASP with Templates generates asp files with VBScript which uses separate html files as templates during the run time C generates aspx files with C code CFML generates ColdFusion code CFML with Templates generates ColdFusion code cfm and separate html template files PHP with Templates generates PHP code php and separate html template files Servlets with Templates generates Java code that utilizes html templates Site Language Country language to use when generating text messages for the site For example the text No records that appears when no more records are to be displayed within a grid could be generated in any support language Date Display Format This 1s the default format for the date fields within the project for example if you display the employee hiring date on a page CodeCharge Studio Tutorial 48 Specifying Project Settings Enter Publishing Settings Sp
51. name status id change to status name user id assign to change to emp name Name project id Source Type Database Colu Caria Source project name CodeCharge Studio Tutorial Finalizing Task List Page 27 Synchronize HTML with the Project Click Live Page to view and test working page Sometimes you will see the message window as shown which explains that some of the components or controls were not found in the HTML This 1s because you previously removed some of the grid columns and CodeCharge Studio wants you to confirm that this is OK since those controls are still defined in the project Click Yes to confirm the removal of the columns and continue CodeCharge Studio a E X The following components were not found in the HTML during the synchronization process Delete them Page tasks list solve Sorter id ssign_by Label CodeCharge Studio Tutorial 28 Finalizing Task List Page View and Test Live Page Finally you can view the working page with a grid containing the list of tasks that can be sorted by clicking on column headings or searched by entering a keyword A TaskManager CodeChargeStudio File Edit Project View Table Tools Help Jc E ssse E hte lke alas lle gt h iWMGR ib Seo e voi Explorer X tasks list x f Toolbox x Monte a Components SEE E Login 55 ST priorities ist Employees Priorities P
52. nnections n Group Name Access c bee fa Employees U v i a Properties Manager imi Administrator ma Page Default Restricted Access Denied Convert URL Tc Includable fforu Az Name Aye mp A Alt amp Groupe OF Cancel No record 5 F 25 bp d ee He JT iann lianalaneL nf t4Tatks Manne ma c i k artment name department n 4 Design HTML Code Preview Live Page Messages Generating Default Publishing project m ah m Publishing page Default Use Group Access 4 authorization Done CodeCharge Studio Tutorial Conclusion 91 Conclusion Congratulations During the course of this brief tutorial you ve created an Employee Directory application made of a searchable grid Click on the Live Page tab to view the result or open the page in your browser t1 Employee Directory CodeChargeStudio File Edit Project View Table Tools Help JD aM loa saw Lx http acalhost emploveedir D efault asp s department name 1 amp s emp name dev amp departrm e eee a l Default x E gl Employee Directe 5 Components rests D iid File Search gm Themes EB Eg Es Default depe UM Sofware E Eg depe EIS Login H E Connections iens E Employe Properties Mame Title Department Email Home Phone
53. or LL LL LL LLL 18 Open Visual Query Builder LL LL LLL 19 Select Additional Tables 3 LL LLL 20 Arrange Tables in Visual Query Builder i 21 Define Table Relations LL LL LLLLLLLLLLLLLLLLLLLLLL 22 Set Fields for Inclusion in the Grid LL 24 POPCHLRSEOOBDOWSE IRI m creer 2i Pierii E a ee teme m ee es hes Sie ete be SE SARI ee oe 25 Update Control Sources i 26 Synchronize HTML with the Project LL LLL 27 View and Test Live Page J LL ee LLLLLLLLLLLLL 28 Add ListBox Search Create New Table Row 29 Add ListBox Search Insert ListBox Control 30 Add ListBox Search Set ListBox Properties eeses s si i i ii 31 Add ListBox Search Move Table Row 32 Filter Grid Records Select Where Property l 33 Filter Grid Records Add Search Parameter 34 Filter Grid Records Group Where Parameters 35 Filter Grid Records Set AND Operator 5 LLL 36 View Working Page Z LL LL LLLA 37 Login to the System 1 ran orare uo eer tr e Mu C fru eee rM cR i e aur De 38 Access Record Maintenance Page LLL 39 COnClUSIOD i icsouasaseaviasR ua aa a ERYEECIREETRRRERENMEEERERRRRERPPRCKAVESEQAMERE ERR RAWERERKREVERERENEESERR UA 40 CodeCharge Studio Tutorial 1V Chapter 2 Creating an Employee DIreCtOry cccccccceceeeeeeeeeeeeeeeeeeeeeseeeeeeeeeeeeeaaas 41 Creating New PFOJGCt
54. ore information refer to http support microsoft com default aspx scid kb EN US g175168 CodeCharge Studio Tutorial Appendix Common Errors 93 Microsoft JET Database Engine 0x80004005 Could not use file already in use This error usually happens on Windows NT 2000 XP when your database file or database folder doesn t have write permissions You can often solve it by following these steps 1 Right click on the project folder on your disk and Q9 C Program Files Code than RE select Properties File Edit View Favorites Tools Help m LERT T JO search gt Folders p wx i E Size Type Date Modified Date Accessed Attributes status Employee Directory File Folder 5 5 2002 12 41PM 5 5 2002 12 41 PM Online TaskManager File Folder 5 2002 10 24 PM 5 5 2002 10 24 PM Online Open Browse with Paint Shop Pro Explore Open with Visual CHM Search Sharing and Security Add to archive Add to TaskManager rar Scan with Norton AntiVirus Send To Cut Copy Create Shortcut Delete Rename 2 In the Security tab add Internet Guest Account and set Write permissions EISSN ix checkbox General Sharing Security Web Sharing Customize Group or user names t Administrators SPCOMPUTER SAdministrators ffi CREATOR OWNER Internet Guest Account lt PCOMPUTERMIUSR_XPCOMPL Konrad gt lt PCOMPUTER Konrad m m Damar I lare SPCOMPLTERAPamar Hoarcl Add Remove
55. pe that you want to work with and convert to a web application If you do not find your database in the list select an equivalent or use ANSI SQL 92 to generate standard SQL Server Path om Power Wizard EXE General project properties Code Language ASP with Templates bd Site Language Engish amp Database MS Access v Server Path c Inetpub wwwroot T askM anager EJ Server LIRL Jit localhost T askM anager Cancel c Back The full path where generated files should be published locally This path is usually preset by the wizard and can be left without changes Server URL The web address corresponding to the Server Path This URL will be used to view the page in Live Data mode The wizard automatically defaults to the appropriate URL that matches the server path CodeCharge Studio Tutorial 6 Using Power Wizard Select Database Connection Specify the database that you want to connect to You can create a new database connection by selecting Use a new database connection and following steps described in chapter 2 Create Database section For the purposes of this tutorial select Intranet Database which is one of the two sample databases included with CodeCharge Studio and containing tables such as tasks priorities and employees A Power Wizard Select database connections to be used in this project CodeCharge Studio Tutorial Using Power Wiza
56. project Position the cursor somewhere within the Keyword text by clicking on it then select the Insert Row icon to add a new table row top the search section A TaskManager CodeChargeStudio Dc ug oc sse emtu a o h ero E aD Normal Tahoma ie B 7 U 27 x Project Explorer tasks lisk Ei fg TaskManager 2 Components ESSENT a JE Common Files EA THeader 2 Er Pages zn BELLI Themes e employees list employees maint Footer Header keyword s keyword Login priorities list Py search priorities taint projects list prajecks maint Cis EB E List of Tasks statuses fist Az Id A wm 42 Project ect A w z Priority A wm z Status statuses maint Properties x Format Data Events gj Record tasksSearch y E oom tasks list amp ftask idc a AYoroject_id A amp priority id A A status Laebesearch s a Na records 0000000 Connection basksSearc a 3 me ACAdd New 4 2 Je lt lt Page_Number of Total_Pages gt gt TERES uL NE 5r Footer El H Footer Ga yi e B s tasks maink of E TP Connections 2 Design Mailys Code Pres ew Liv fe Page IF None I Restricted XI Custom E Generating Common Files Custom Inser Generating tasks_list on Publishing project l Publishing page tasks list hd Insert Raw
57. r Date Format eevy mm dd HH nn ss Boolean Format M Same as Design pS Use ODBC Data Source Mame d Hew Use Connection String P Build User Name User Password The Server Connection is the database connection utilized by generated programs to retrieve and update the data This connection can be different from the Design Connection which is used by CodeCharge Studio GUI Instead of selecting Same as Design you may build a separate connection string if you are publishing the project to an external server or if you want to use a separate database for website testing on your local machine This screen may look differently depending on the programming language you use CodeCharge Studio Tutorial 60 Creating Database Connection Save Project Settings Click the Save All icon on the toolbar to save your project E CodeChargeStudio D d E Ee c 5 cm m eho p EO leo Normal Save alls New Roman 2 206 B 7U i i NewPagel Eig Employee Directory f Common Files x Toolbox T x4 E Components Controls c Pages VES a Eg Rn NewPagel FSI EE Gh 3 gEB Connections Employees Properties x EE os events Page NewPagel Restricted No Access Deni mj mdhbe No 55L Access No Design HTML Code Preview Live Page Messages x CodeCharge Studio Tutorial Creating Grid with Grid Wizard 61 Creating
58. r Pe 20 Page Size Limit 100 Messages Publishing page Header Publishing page Footer Generating Common Files Generating tasks list 4 Ha http localhost TaskManager tasks maint asp s_keviwvord bugs_project 1etask_id 2 CodeCharge Studio Tutorial 38 Finalizing Task List Page Login to the System When you click on any of the tasks ids on the task list page you will arrive at the Login page where you can enter your login and password Enter johns johns to login as John Smith Your entry will be stored in a session variable on the server thus making it unnecessary to login again until your session expires iE TaskManager CodeChargeStudio Ele Edit Project view Table Tools Help Du E o X 85 en ers ro 8 s n e d e Iti http localhost T askhanager tasks maint asp s keyword bug amp s project T amp task id 2 e tasks Jt x Project Explorer X EH Teskttanager zT a controls EA bee sl Common Files Rosen Employees Priorities Projects Statuses Tasks A sl A s 3 2 Eades EE a To e a employees list Login HEH employees maink Login ohns Footer Header Password e ssel Login x priorities ist priorities main projects list projects_ maint statuses list statuses maint K tasks list sesessas2ena us H Header Fa tasksSearch Con
59. rd 7 Configure the Wizard Configure the Wizard by specifying configuration options as follows Enable smart naming Select it so that the Wizard will automatically convert table names to English captions for example employees table will be shown as List of Employees grid on the page Fields like task name will be converted to column headings like Task Name Autoincremented Primary Keys Select this option to specify that the database tables contain key fields that are autoincremented The Wizard then will hide the key fields from the record maintenance forms since users do not need to enter key values Use single keyword field for text and memo fields on search forms Select this option to generate single search field for each of the tables grids If this option is deselected the wizard creates search section with multiple search fields one search field for each text or memo field in the database table Publish the site after Wizard completes creating pages Specify that you want to publish the site as soon as the Wizard creates all necessary pages This prevents from forgetting to generate publish some of the files needed for the application to run amp Power Wizard js ER x RN Wizard Options J Enable smart naming Enable relationship discovery J Autoincremented Primary Keys w Use single keyword field for text and memo fields on search forms Cancel lt Back Next gt Finish CodeC
60. rd 77 Publish the Page Click on the Live Data tab below the main window to test the page in the same way as it would be accessed by users via a browser If this is the first time you are publishing this project and the publishing folder doesn t exist CodeCharge Studio displays a window asking to approve the creation of a new folder Click Yes to confirm and continue CodeChargeStudio ee UR x 4 Project Explorer x Toolbox Eig Employee Directory fel Common Files x Default Components seas ci Let NN EG Pages Project settings tmu m ESSE ER Default for Publishing Ez m H E departmei l H Fg departmer Location Local Netwark EE Connections Server Fath EA netpubtwwrootemployeedi Browse EA Employees Server URL nttpz localhost emplopeedi Incomplete Data Properties x The Server Path does nnt exist DONAR rore teo EB Grid departments emp Restricted No Design Bala Code Preview Live Page Messages Publishing project Publishing page Default For Help press F1 CodeCharge Studio Tutorial 78 Finalizing Search and Grid created by the Wizard Review and Test Published Page When the project is published you may view and interact with the generated page to test its functionality Try to enter a search keyword and select a department then click the Find button You may notic
61. rity id A status d Toolbox S z SERERE coco TI Sl A wi st i c EB iH L E Properties S d Data EH Grid tasks Name tasks skatuses lisk statuses maint Fasks lisE E ud p 5r Header No records Connection IntranetDB E Eel ES eae A Add New t2 lt lt lt Page Number of Total_Pages gt celvpe Table fabl s keyword L Data Source tasks employer E DoSearch EI Footer E m Where 1 Restricted Design Maily i Code Preview Live Page Records Per Par EN B s Easks maint HEA Connections Messages Publizhing page Header Publishing page Footer Generating Common Files Generating tasks list ia Standard WWHERE clause k appended ta SELECT T CodeCharge Studio Tutorial 34 Finalizing Task List Page Filter Grid Records Add Search Parameter Add new search parameter to the grid by clicking on the button and then specifying tasks project_id field to be matched against s project parameter which is the name of the previously created ListBox This will cause the grid to receive the parameter via the URL then show only matching results Click OK when finished entering the information E Data Source Connection IntranetDB aa Refresh Data Source Type Table Test Review Data Data Source Tableview
62. rojects Statuses Tasks FS priorities maint ES B H S projects list Sea rch Tasks mS projecks main ES statuses ist lt i El SF stakuses main EH tasks list hi Header B Fa tasksSearch tasks List of Tasks Ea t rx m 21 sorter_te Id Project Priority Status Name Assigned To Format Events m amp l Sorter pi Great Project EB Grid tasks uso ere ES tx insurer greater areat N M ject z a Connection IntranetDB a CodeCharge Highest Open Fix ALL bugs Stefan Fey Source Type Sorter_pi E amp l Sorter st gt Sorter tc amp l Sorter_u i HA task id Data Source ess employe m LA project i T codecharge High Closed p i David Snyder Where ME A priority L a A status id L1 1L L Finish Mv Pablo pos A Fask nari Design HTML Cade Preview Live Page Records Per i ped PA user id A Fage Size ENGL dun A tasks In Messages he Navigato__ eneratina Fonar i Pe a Faber Publishing page Header P bli hi E t a 28 tasks maint R ubllsning page Footer 4 Generating Common Files CodeCharge Studio Tutorial Finalizing Task List Page 29 Add ListBox Search Create New Table Row Now let s add an additional search option to the grid a ListBox with project names so that users can view tasks within selected
63. rties Convert LIRL None B ENS Fasks main a Restricted Mo lt FORM Properties Sa B rg Connections P 2 Custom Insel Publishing page Header lt TABLE Properties GEER Insel Publishing page Footer Genstatinc Common Files lt TR Properties Custom Upde Generating aska list 7D gt Properties 4 k For Help press F1 Properties CodeCharge Studio Tutorial Finalizing Task List Page 33 Filter Grid Records Select Where Property Working ListBox is now created on the page but it cannot be used to filter grid s records until the grid itself uses the parameters passed via the ListBox To setup those filtering parameters you will need to use WHERE criteria within grid s data source Select the grid by clicking anywhere within grid s caption on the page or by selecting it in the Project Explorer Then click on the button in Where property E TaskManager CodeChargeStudio Dende Si hro 3 s ISO eo ie Normal Tahoma j st4on B IU Project Explorer tasks lisk Es TaskManager bee d Common Files B Fal Pages for Search Tasks Themes lc employees list emplovees maink uim SS fs keyword 0000 Footer Header srl Select salue Y Login priorities lisk E EN priorities taint torm Eg Ell List of Tasks projects lisE Az qd a wem Az project a wem 42 priority 4 v2 P Statu prajecks main amp task idi A amp project id A amp prio
64. ses table that contains status names A TaskManager CodeChargeStudio next to the Data Source property to open the Data Source windows Eile Edit Project View Table Tools Help JD Eg cee II RNN Projet Explorer H E projects main E um statuses lisk EEk statuses_mair me tasks lisk Sorter al Sorter al Sorter Sorter 2 Sorter zl Sorter Sorter 2 Mavig 2 2 beaten FT ae hb 4 k E Data Source Connection Data Source Type Data Source Where V Tis aem lom Bh m EY dE Dee arem et a ds ma itask name contains like 5 22 fs keyword or ask desc contains like 25 25 s keswordY or ask resalution contains like AND Order By E DK Cancel Generating Header Generating Footer Publishing page Header Publishing page Footer oo 18 keyword ee ranet E Refresh z M Test Review Data Table iew tas ls Select Query Toolbox x Components Were p E 4a ie GH Properties x AUEI Data SAELE Grid tasks Mame tasks Connection IntranetDB Source Type Table Data Source tasks Where Order By Restricted No Records Per F 20 Page Size Lim 100 Tableview SQL statement or Stored For Help press F1 CodeCharge Studio Tutorial Finalizing Task List Page 19 Open Visual Query Builder Now open Visual Query Builder by clicking Select Qu
65. stricted No Access Deris Incudable No SEL Access No Design HTML Code Preview Live Page Messages x CodeCharge Studio Tutorial Specifying Project Settings 45 Specifying Project Settings Project settings allow you to specify how to generate your web application where to publish it You can specify the programming language publishing directory database connection site authentication and various additional details describing project s configuration Open Project Settings Select Project Settings on the main menu bar E CodeChargeStudio Ele Edt File Edit Project View Table Tools Help IO 0 s oa Nema es Publish Project E Publish Page Peer o B i eea 02 B zu E d c Project Exp agel x f Toolbox x E La Employee Directory zs Components Controls ae jl Common Files CN eee B B Pages Poe an NewPagel Ez r5 m Connections j x Access C Design ial Code Preview Live Page Settings CodeCharge Studio Tutorial 46 Specifying Project Settings You may also right click on the Project Name Employee Directory in the Project Explorer window and select Settings there CodeChargeStudio File Edit Project View Table Tools Help ID ce Ed CE o c aple SS C Normal a 3 12p anie DM O X MewPagel B i Pages Generate Code E NewPag ig Publish EP Connections Re
66. t on the initial screen pen E i ail y ip E Ls 3 d TS 1 25 pea i 1 mic wae Ji an E Dm zn ixl H kJ Lu db 55 Jes ieee E ES j itd v 4 my i HE E ES e zj zi Project Explorer x Toolbox x CodeCharge Studio _ xj Components ERNE E ta 4 m ES Ci Program FilesCodeChargeStudio Projects T askManagement T as C Program Files CodeChargeStudiolProjects WewProject 1 NewProje Properties x Format ta Events m p a a EN NENNEN NENNEN p a ae gt Messages CodeCharge Studio Tutorial Creating New Project 43 Create Blank Project Enter project name Employee Directory Enter the Location where the project should be saved on the disk then click OK button to confirm and create new project DATERET Project Explorer Ep pees fiToolbox act Power Wizard Properties ILLE bt CodeCharge Studio Tutorial 44 Creating New Project Save Newly Created Project You may click the Save All icon on the toolbar to save your project at any time A CodeChargeStudio JE 0 s E ee e E e sh ca bliean E T ls Noma Save alle New Roman 2 206 H Z U Project Explorer zx NewPagel x EE x P Components Controls fa 4a 4a bu ES E gl Employee Directory m JE Common Files Elf Pages Tel NewPaget aaga Connections Properties xj Format o Events 1 Page NewPagel Re
67. t name GI Table Parameter Field Condition Parameter source Mame ie contains like 96 365 Jsempname Type Tet ss Tye URL Format zl Format sz And Or AND v Default Value Po OF Cancel OF Cancel CodeCharge Studio Tutorial Finalizing Search and Grid created by the Wizard 81 Data Source m Now modify the search parameter Connection Employees EE m EE B associated with the department name Double click Data Source Type Table Test Review Data Mi E on it and in the parameter setup T ableAiewr departments employees Select Query bona M E ENS Mis field that will be searched with the s department name parameter Additionally select equals as the Condition since users will select the exact department using the ListBox Condition Parameter source ats denartment i equals department name departments HER jartment id ut Type Format Format Andr Default Value Ok Cancel ahone work G Data Source i E Finally once your parameters are Connection Employees Es Refresh configured we need to specify that the Data Source Type Table Test parcum we want to see the results if either the MP Employee Name or Title matches the PME penamaan M C EE specified Keyword To do this select both the emp name and title parameters by holding the CTL key and clicking on each one Then cl
68. tasks employees priorities projects statuse Select Query oe 1s keyword or ask desc contains like 75 75 8 keyword or ask resnlution contains like 2 25 Ts keyword Table Parameter EN Field Condition Parameter source Name tasks project id equals s_proiect k Type Integer Type URL Format Format And Or AND Default Value LE Cancel CodeCharge Studio Tutorial Finalizing Task List Page 35 Filter Grid Records Group Where Parameters Back in the Data Source window you will see four parameters three previously configured by Power Wizard for the search keyword and one you just added for the project listbox Now the grid will return results if any of the criteria are met however we want results to be returned only if both the keyword and listbox parameters are matched For example if a user enters keyword bug and selects project CodeCharge the grid shouldn t return records that are within the selected project or that contain word bug Instead in we d want the grid to show results that are within the project CodeCharge and contain the word bug To configure the grid in such a way first group together all parameters matched against s keyword Select first three parameters by dragging the mouse over them or by holding Control button and clicking on each parameter Then click the button to add parentheses around the selec
69. ted parameters which will group them together A Data Source pall x HEMA Connection IntranetDB Refresh Data Source Type Table Test Review Data Data Source Table view tasks employees priorities projects statuse Select Query di ar Eds yWo rat or AND Order By ie DK Cancel CodeCharge Studio Tutorial 36 Finalizing Task List Page Filter Grid Records Set AND Operator Now that all search parameters are in place the remaining task is to specify that the last keyword parameter should append the AND operator so that the full search parameters read as follows task name contains like Is keyword or task desc contains like Is keyword or task resolution contains like Is keyword and tasks project id equals fs project E Data Source B M ss Connection IntranetDB m Refresh Data Source Type Table Test Review Data Data Source Tableview tasks employees priorities projects statuse Select Query Where task_name contains like 22 22 4s keyword or task gesc contains like veo 1S keyword OF task resclution contains dike sc 5 js keyworde j OI mmm mt e tasks project id equals s_project Table Parameter iM E X Field Condition Parameter source Name tesk resolution contains like m ikewo Type Memo Tye URL Form
70. users to type their login as soon as the page is shown without the need to click on the Login field first A Authentication Wizard Please select Login Form options CodeCharge Studio Tutorial Protecting Web Pages from Unauthorized Access 87 Select a Theme for the Login Form Select one of the available color and graphics schemes that you like to use for the login form A Authentication Wizard Select a Theme for the Grid 22s Login login f Login ext CodeCharge Studio Tutorial 88 Protecting Web Pages from Unauthorized Access Specify the Login Page for the Project Once back in the main CodeCharge Studio screen click on the project name Employee Directory then click the button in Project s data properties t1 Employee Directory CodeChargeStudio File Edit Project View Table Tools Help IP c Ed E om BS we ee RS fe a e esl E Jenna a 2 1200 B 7 U i t Se A 4 0 0 BAENA Login x f Toolbox xj Z Components STERN LI a Ma ji gt EI Common Files E Tu M qao Go Pages a HH Themes al 8 e Default form Login EACH id n sErrart Ee Connections fa Employees _ Ue Properties xj Eoma Data Events 8 Site Employee Dea Cade Language iram Temi Tel RUPEE Security Type None Login Page Convert URL To Desian HTML Code Preview Live Page User ID Mem um A Messages t Employees
71. vert URL To Mone H Eg tasks Indudable h Mo n Sn Rants SSL Access Only No i H a tasks main oi TP Connections Design HTML Code Preview Live Page Messages Publishing page Header Publishing page Faoter Generating Common Files Generating tasks list CodeCharge Studio Tutorial Finalizing Task List Page 39 Access Record Maintenance Page Once you select a task id on the task list page and get through the login page you will arrive at the record maintenance page where you can view and update the task detail Click Submit button when finished or hit the browser s Back button A TaskManager CodeChargeStudio a ii 3 E p j x Eile Edit Project view Table Tools Help o ea e IN Project Explorer Eig TaskManager fe Common Files Pages Themes e employees list employees ma Footer Header Login priorities list priorities maint projects lisk prajecks maint statuses list statuses maint x Toolbox tasks ist See tio components controls iit A abi kb iv v EB 3 amp Staying up at night coding Get CodeCharge qo E home get rest i Properties DOSSODODSODSL EH Grid tasks IT tasks fist SI tasks maint zl IntranetDB Connections E s isS eae Where 000000000 User Id Assign To B o Order By Bv Po ae pate Assig
72. zard Power wizard is a powerful feature of CodeCharge Studio that can automatically convert a database into a working web application By following a few short steps you can create administrative web pages for your SQL database or create a skeleton of a web application that you can then extend into a full featured solution In this chapter we will take you through steps of creating ready to use Task Management System created in large part by the Power Wizard then finalized by utilizing other features of CodeCharge Studio CodeCharge Studio Tutorial Using Power Wizard 3 Using Power Wizard Create New Project Start CodeCharge Studio and select New project on the initial screen pea E i ail y ip E Ls 3 d TS 1 25 pea i 1 mic wae Ji an E Dm zn ixl H kJ Lu db 55 Jes ieee E ES j itd v 4 my i HE E ES e zj zi Project Explorer x Toolbox x CodeCharge Studio _ xj Components ERNE E ta 4 m ES Ci Program FilesCodeChargeStudio Projects T askManagement T as C Program Files CodeChargeStudiolProjects WewProject 1 NewProje Properties x Format ta Events m p a a EN NENNEN NENNEN p a ae gt Messages CodeCharge Studio Tutorial 4 Using Power Wizard Launch Power Wizard To start the Power Wizard specify the name of the new project TaskManager select the location on the disk and the programming language then double click o
73. zard creates two pages for each of the tables Search and Grid page Record Maintenance page By clicking on a name of any of the tables it is also possible to specify that the Search Grid and Record sections should all be on the same page for each of the tables For purposes of this tutorial configure pages as shown below The wizard will then convert tables to web pages as follows employees table searchable list of employees page and employee information page accessible only by authorized users priorities table list of priorities page and priority maintenance page accessible only by administrators projects table list of projects page and project maintenance page accessible only by administrators statuses table list of statuses page and status maintenance page accessible only by administrators tasks table searchable list of tasks accessible by anyone and task maintenance page accessible by authorized users Bj Power Wizard B x E Generate pages with forms based on database tables and queries ma pese TE a e a e e a DE Cancel lt Back Nes p Finish CodeCharge Studio Tutorial Using Power Wizard 11 Specify Site Layout and Menu The Wizard automatically creates a header page with a menu which 1s then placed on all other pages for easy navigation Click Next to leave the default horizontal position of the menu on all pages A Power Wizard Select Page Layout CodeCharg

CodeCharge Studio - Introductory Tutorial

Contents

Download Pdf Manuals

Related Search

Related Contents