# Web App Example: A Simple Address Book Today we will look at a little PicoLisp App that is actually documented on [www.picolisp.com](https://picolisp.com/wiki/?mindbgui). I think examples can be very helpful when you lack inspiration or don't know where to start. We will discuss the following little demo app: A little addressbook where you can store address, contact and birthday of your friends. This is how it looks like: ![addressbook.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637270985995/RgfkSvK1s.png) In fact, this app is very similar to our previous "Todo-List" example. Instead of going into detail, I will refer to relevant posts for further reference. ------------------ ### Download the file I have uploaded the program to [here](https://gitlab.com/picolisp-blog/web-applications/-/tree/main/addressbook). The app is also expecting a folder ``db/`` on the same level. After creating the db folder, you can start the app with: ``` $ pil adr.l -main -go + ``` If you now visit http://localhost:8080, you see a little login field. ![adrlogin.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637270037602/CqHCHOe0F.png) ------------------- What's the password? Let's check the source code: ``` (ifn *Login (form NIL (gui 'pw '(+PwField) 20 ,"Password") (gui '(+Button) ,"login" '(ifn (= "mypass" (val> (: home pw))) (error ,"Permission denied") (on *Login) (url "!work") ) ) ) ``` The password is hardcoded as "mypass". If you want to change the authentication system to something more elaborate, read on here: - https://picolisp-blog.hashnode.dev/user-administration-with-the-adml-library - https://picolisp-blog.hashnode.dev/creating-a-todo-app-5-adding-the-user-login Now let's quickly scan through the code. ----------- ### The Header The header has three lines: The ``allowed`` function which defines which variables and functions the server accepts, the ``load`` function which loads the relevant libraries. ``` (allowed () "!work" "@lib.css" ) (load "@lib/http.l" "@lib/xhtml.l" "@lib/form.l") ``` After that comes the Entity-Relationship Model: ``` (class +Prs +Entity) (rel nm (+Sn +IdxFold +String)) # Name (rel adr (+IdxFold +String)) # Address (rel em (+String)) # E-Mail (rel tel (+String)) # Telephone (rel dob (+Date)) # Date of birth ``` You might wonder why there is no property "street" or "city" - this is simply for the sake of simplicity. As you can see, the name supports a tolerant search using the soundex ``+Sn``prefix class. Further reads: - [E/R Modelling](https://picolisp-blog.hashnode.dev/how-to-define-entities-and-relationships-in-the-picolisp-database) - [Setting up the program file](https://picolisp-blog.hashnode.dev/creating-a-user-interface-to-the-database-setup) ----------- ### The functions In total, there are three functions: ``work``, ``main`` and ``go``. - ``work`` contains the whole app, - ``main`` sets the language to German and opens the database, - ``go`` starts the application server on port 8080. ``` (de work () ) (de main () (locale "UK" ) (pool "db/adr") ) (de go () ) ``` - more on ``main``: [Starting the PicoLisp Database](https://picolisp-blog.hashnode.dev/getting-started-with-the-picolisp-database) - more on ``go``: [Setting up the server](https://picolisp-blog.hashnode.dev/web-application-programming-in-picolisp-setting-up-the-server) ------------- ### The ``work`` function Now let's focus on the core of this program, the ``work`` function. If the user is logged in (``*Login`` is ``T``), we can see a table with the address data, which can also be used to add or modify entries. We can also search for specific entries. --------------------- ### The Search Field ![search.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637271011960/eE8_jECFS.png) The search field consists of two user input fields. The values go directly in to a ``+QueryChart`` component that runs a [pilog](https://picolisp-blog.hashnode.dev/series/pilog) query to return the desired objects from the database. ``` (form NIL ( "--." "Name" (gui 'nm '(+DbHint +TextField) '(nm +Prs) 20) (searchButton '(init> (: home query))) "Address" (gui 'adr '(+DbHint +TextField) '(adr +Prs) 20) (resetButton '(nm adr query)) ) (gui 'query '(+QueryChart) 12 ... ``` The ``+QueryChart`` component has a number of parameters and is rather complex. Here are more documentation and examples on ``+QueryChart``: - [Creating a user Interface for Data Modification, 1](https://picolisp-blog.hashnode.dev/creating-a-user-interface-for-data-modification-part-1) - [Creating a user Interface for Data Modification, 2](https://picolisp-blog.hashnode.dev/creating-a-user-interface-for-data-modification-part-2) ---------------- ### The ``table`` component Finally, the output data from the database is rendered in a GUI component named ````. ``` (
NIL (choTtl "Entries" '+Prs) (quote (NIL "Name") (NIL "Address") (NIL "E-Mail") (NIL "Telephone") (NIL "Date of birth") ) (do 12 ( NIL (gui 1 '(+TextField) 30) (gui 2 '(+TextField) 40) (gui 3 '(+MailField) 20) (gui 4 '(+TelField) 15) (gui 5 '(+DateField) 10) (gui 6 '(+DelRowButton) '(lose!> (curr)) '(text "Delete Entry @1?" (curr 'nm)) ) ) ) ) (scroll 12) ) ) ) ) ) ``` Here you can find more information on how to use ``
``: - [PicoLisp HTML tags in general](https://picolisp-blog.hashnode.dev/web-application-programming-in-picolisp-adding-html-tags) - [Creating a ToDo App](https://picolisp-blog.hashnode.dev/how-to-create-a-to-do-app-in-picolisp-desktop-version) ---------- You can download the source code of the addressbook program [here](https://gitlab.com/picolisp-blog/web-applications/-/blob/main/addressbook/adr.l). In the next post, we will look at a more interesting one: a simplified ERP app. ---------- # Sources
Icons made by vectorspoint from www.flaticon.com
https://picolisp.com/wiki/?mindbgui