Skip to content

Commit 1a6f409

Browse files
lovasoalovasoa
committed
remove the demo from the default "it works" page
move the demo to its own demo folder instead of bundling it with sqlpage Fixes #83
1 parent cb5fbc4 commit 1a6f409

File tree

4 files changed

+181
-133
lines changed

4 files changed

+181
-133
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,13 +137,16 @@ An alternative for Mac OS users is to use [SQLPage's homebrew package](https://f
137137

138138
## Examples
139139

140+
- [Plots, Tables, forms, and interactivity](./examples/plots%20tables%20and%20forms/): a short well-commented demo showing how to use plots, tables, forms, and interactivity to filter data based on an URL parameter.
140141
- [Tiny splitwise clone](./examples/splitwise): a shared expense tracker app
141142
- [Corporate Conundrum](./examples/corporate-conundrum/): a board game implemented in SQL
142143
- [Master-Detail Forms](./examples/master-detail-forms/): shows how to implement a simple set of forms to insert data into database tables that have a one-to-many relationship.
143144
- [SQLPage's own official website and documentation](./examples/official-site/): The SQL source code for the project's official site, https://sql.ophir.dev
144145
- [User Management](./examples/user-authentication/): An authentication demo with user registration, log in, log out, and confidential pages. Uses PostgreSQL.
145146
- [Making a JSON API and integrating React components in the frontend](./examples/using%20react%20and%20other%20custom%20scripts%20and%20styles/): Shows how to integrate a react component in a SQLPage website, and how to easily build a REST API with SQLPage.
146147

148+
You can try all the examples online using [SQLPage's online demo on replit](https://replit.com/@pimaj62145/SQLPage).
149+
147150
## Configuration
148151

149152
SQLPage can be configured through either a configuration file placed in `sqlpage/sqlpage.json`

‎examples/plots tables and forms/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# SQLPage demo
2+
3+
This short demo illustrates the usage of
4+
- plots
5+
- tables
6+
- forms
7+
- interactivity to filter data based on an URL parameter
8+
- debugging using the `debug` component
9+
10+
The [`index.sql`](./index.sql) page is heavily commented to explain the different components and concepts.

‎examples/plots tables and forms/index.sql

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
-- Welcome to SQLPage ! This is a short demonstration of a few things you can do with SQLPage
2+
-- Using the 'shell' component at the top allows you to customize your web page, giving it a title and a description
3+
select 'shell' as component,
4+
'SQLpage' as title,
5+
'/' as link,
6+
'en' as lang,
7+
'SQLPage Demo' as description;
8+
9+
-- Making a web page with SQLPage works by using a set of predefined "components"
10+
-- and filling them with contents from the results of your SQL queries
11+
select 'hero' as component, -- We select a component. The documentation for each component can be found on https://sql.ophir.dev/documentation.sql
12+
'It works !' as title, -- 'title' is top-level parameter of the 'hero' component
13+
'If you can see this, then SQLPage is running correctly on your server. Congratulations! ' as description;
14+
-- Properties can be textual, numeric, or booleans
15+
16+
-- Let's start with the text component
17+
SELECT 'text' as component, -- We can switch to another component at any time just with a select statement.
18+
'Get started' as title;
19+
-- We are now inside the text component. Each row that will be returned by our SELECT queries will be a span of text
20+
-- The text component has a property called "contents" that can be that we use to set the contents of our block of text
21+
-- and a property called "center" that we use to center the text
22+
SELECT 'In order to get started ' as contents;
23+
select 'visit SQLPage''s website' as contents,
24+
'https://sql.ophir.dev/' as link,
25+
true as italics;
26+
SELECT '. You can replace this page''s contents by creating a file named ' as contents;
27+
SELECT 'index.sql' as contents, true as italics;
28+
SELECT ' in the folder where sqlpage is running. ' as contents;
29+
SELECT 'Alternatively, you can create a table called sqlpage_files in your database with the following columns: path, contents, and last_modified.' as contents;
30+
31+
-- The text component also support rich text using the markdown syntax with the property "contents_md"
32+
SELECT '
33+
## Rich text
34+
You can use markdown syntax in SQLPage to make your text **bold**, *italic*, or even [add links](https://sql.ophir.dev/).
35+
' as contents_md;
36+
37+
select 'text' as component,
38+
'Demo' as title;
39+
-- We can switch to another component at any time just with a select statement.
40+
-- Let's draw a chart
41+
select 'chart' as component, -- selecting a different component
42+
'Revenue per country' as title, -- setting the component's top-level properties. The documentation for each component's properties can be found on https://sql.ophir.dev/documentation.sql
43+
'bar' as type,
44+
'time' as xtitle,
45+
'price' as ytitle,
46+
true as stacked;
47+
-- Inside the chart component, we have access to the "series", "label", and "value" row-level properties
48+
-- Here, we are selecting static data, but you can also use a query to a real database
49+
select 'Russia' as series,
50+
'2022-01' as label,
51+
2 as value
52+
union
53+
select 'Russia',
54+
'2022-02',
55+
4
56+
union
57+
select 'Russia',
58+
'2022-03',
59+
2;
60+
select 'Brasil' as series,
61+
'2022-01' as label,
62+
4 as value
63+
union
64+
select 'Brasil',
65+
'2022-03',
66+
1
67+
union
68+
select 'Brasil',
69+
'2022-04',
70+
1;
71+
-- Let's make a new chart, this time generating the data with a more complex query
72+
select 'chart' as component,
73+
'Collatz conjecture' as title,
74+
'area' as type;
75+
76+
SELECT 'syracuse' as series, x, y
77+
FROM (
78+
SELECT 0 AS x, 15 AS y UNION SELECT 1, 46 UNION SELECT 2, 23 UNION SELECT 3, 70 UNION SELECT 4, 35 UNION SELECT 5, 106 UNION SELECT 6, 53 UNION SELECT 7, 160 UNION SELECT 8, 80 UNION SELECT 9, 40 UNION SELECT 10, 20 UNION SELECT 11, 10 UNION SELECT 12, 5
79+
) AS syracuse ORDER BY x;
80+
81+
select 'table' as component,
82+
true as sort,
83+
true as search;
84+
-- The table component lets you just select your data as it is, without imposing a particular set of properties
85+
select 'John' as "First Name",
86+
'Doe' as "Last Name",
87+
1994 as "Birth Date"
88+
union
89+
select 'Jane',
90+
'Smith',
91+
1989;
92+
-- Here, things get a little more interesting. We are making a small app to learn our times table
93+
-- We will display a set of cards, each one displaying the result of the multiplication a * b
94+
select 'card' as component,
95+
5 as columns;
96+
97+
WITH nums(x) AS (
98+
SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION SELECT 9 UNION SELECT 10
99+
)
100+
SELECT a.x || ' times ' || b.x as title,
101+
CASE
102+
a.x % 4
103+
WHEN 0 THEN 'red'
104+
WHEN 1 THEN 'green'
105+
WHEN 3 THEN 'yellow'
106+
ELSE 'blue'
107+
END as color,
108+
a.x || ' x ' || b.x || ' = ' || (a.x * b.x) as description,
109+
'This is basic math' as footer,
110+
'?x=' || a.x as link -- This is the interesting part. Each card has a link. When you click the card, the current page is reloaded with '?x=a' appended to the end of the URL
111+
FROM nums as a, nums as b
112+
WHERE -- The powerful thing is here
113+
$x IS NULL
114+
OR -- The syntax $x allows us to extract the value 'a' when the URL ends with '?x=a'. It will be null if the URL does not contain '?x='
115+
b.x = $x::DECIMAL
116+
ORDER BY a.x, b.x;
117+
-- So when we click the card for "a times b", we will reload the page, and display only the multiplication table of a
118+
---------------------------
119+
-- FORMS --
120+
-- Until now, we have only read data. Let's see how we can write new data to our database
121+
-- You can use an existing table in your database
122+
-- or create the table by just creating a file at 'sqlpage/migrations/00_create_users.sql'
123+
-- containing the SQL query to create the table. For this example, we will use:
124+
-- CREATE TABLE IF NOT EXISTS users(name TEXT);
125+
126+
-- Displaying a form is as easy as displaying a table; we use the "form" component
127+
-- Let's display a form to our users
128+
select 'form' as component,
129+
'Create' as validate,
130+
'New User' as title;
131+
select 'number' as type,
132+
'age' as placeholder;
133+
select 'First Name' as name,
134+
true as autocomplete,
135+
true as required,
136+
'We need your name for legal reasons.' as description;
137+
select 'Last name' as name,
138+
true as autocomplete;
139+
select 'radio' as type,
140+
'favorite_food' as name,
141+
'banana' as value,
142+
'I like bananas the most' as label;
143+
select 'radio' as type,
144+
'favorite_food' as name,
145+
'cake' as value,
146+
'I like cake more' as label,
147+
'Bananas are okay, but I prefer cake' as description;
148+
select 'checkbox' as type,
149+
'checks[]' as name,
150+
1 as value,
151+
'Accept the terms and conditions' as label;
152+
select 'checkbox' as type,
153+
'checks[]' as name,
154+
2 as value,
155+
'Subscribe to the newsletter' as label;
156+
157+
-- We can access the values entered in the form using the syntax :xxx where 'xxx' is the name of one of the fields in the form
158+
-- insert into users select :"First Name" where :"First Name" IS NOT NULL;
159+
-- We don't want to add a line in the database if the page was loaded without entering a value in the form, so we add a WHERE clause
160+
-- Let's show the users we have in our database
161+
-- select 'list' as component, 'Users' as title;
162+
-- select name as title from users;
163+
-- The debug component displays the raw results returned by a query
164+
select 'debug' as component;
165+
select $x as x,
166+
:"First Name" as firstName,
167+
:checks as checks;

‎index.sql

Lines changed: 1 addition & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -20,141 +20,9 @@ SELECT 'text' as component, -- We can switch to another component at any time ju
2020
-- and a property called "center" that we use to center the text
2121
SELECT 'In order to get started ' as contents;
2222
select 'visit SQLPage''s website' as contents,
23-
'https://sql.ophir.dev/' as link,
23+
'https://sql.ophir.dev/your-first-sql-website/' as link,
2424
true as italics;
2525
SELECT '. You can replace this page''s contents by creating a file named ' as contents;
2626
SELECT 'index.sql' as contents, true as italics;
2727
SELECT ' in the folder where sqlpage is running. ' as contents;
2828
SELECT 'Alternatively, you can create a table called sqlpage_files in your database with the following columns: path, contents, and last_modified.' as contents;
29-
30-
select 'text' as component,
31-
'Demo' as title;
32-
-- We can switch to another component at any time just with a select statement.
33-
-- Let's draw a chart
34-
select 'chart' as component,
35-
'Revenue per country' as title,
36-
'bar' as type,
37-
'time' as xtitle,
38-
'price' as ytitle,
39-
true as stacked;
40-
-- Inside the chart component, we have access to the "series", "label", and "value" properties
41-
-- Here, we are selecting static data, but you can also use a query to a real database
42-
select 'Russia' as series,
43-
'2022-01' as label,
44-
2 as value
45-
union
46-
select 'Russia',
47-
'2022-02',
48-
4
49-
union
50-
select 'Russia',
51-
'2022-03',
52-
2;
53-
select 'Brasil' as series,
54-
'2022-01' as label,
55-
4 as value
56-
union
57-
select 'Brasil',
58-
'2022-03',
59-
1
60-
union
61-
select 'Brasil',
62-
'2022-04',
63-
1;
64-
-- Let's make a new chart, this time generating the data with a more complex query
65-
select 'chart' as component,
66-
'Collatz conjecture' as title,
67-
'area' as type;
68-
69-
SELECT 'syracuse' as series, x, y
70-
FROM (
71-
SELECT 0 AS x, 15 AS y UNION SELECT 1, 46 UNION SELECT 2, 23 UNION SELECT 3, 70 UNION SELECT 4, 35 UNION SELECT 5, 106 UNION SELECT 6, 53 UNION SELECT 7, 160 UNION SELECT 8, 80 UNION SELECT 9, 40 UNION SELECT 10, 20 UNION SELECT 11, 10 UNION SELECT 12, 5
72-
) AS syracuse ORDER BY x;
73-
74-
select 'table' as component,
75-
true as sort,
76-
true as search;
77-
-- The table component lets you just select your data as it is, without imposing a particular set of properties
78-
select 'John' as "First Name",
79-
'Doe' as "Last Name",
80-
1994 as "Birth Date"
81-
union
82-
select 'Jane',
83-
'Smith',
84-
1989;
85-
-- Here, things get a little more interesting. We are making a small app to learn our times table
86-
-- We will display a set of cards, each one displaying the result of the multiplication a * b
87-
select 'card' as component,
88-
5 as columns;
89-
90-
WITH nums(x) AS (
91-
SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION SELECT 9 UNION SELECT 10
92-
)
93-
SELECT a.x || ' times ' || b.x as title,
94-
CASE
95-
a.x % 4
96-
WHEN 0 THEN 'red'
97-
WHEN 1 THEN 'green'
98-
WHEN 3 THEN 'yellow'
99-
ELSE 'blue'
100-
END as color,
101-
a.x || ' x ' || b.x || ' = ' || (a.x * b.x) as description,
102-
'This is basic math' as footer,
103-
'?x=' || a.x as link -- This is the interesting part. Each card has a link. When you click the card, the current page is reloaded with '?x=a' appended to the end of the URL
104-
FROM nums as a, nums as b
105-
WHERE -- The powerful thing is here
106-
$x IS NULL
107-
OR -- The syntax $x allows us to extract the value 'a' when the URL ends with '?x=a'. It will be null if the URL does not contain '?x='
108-
b.x = $x::DECIMAL
109-
ORDER BY a.x, b.x;
110-
-- So when we click the card for "a times b", we will reload the page, and display only the multiplication table of a
111-
---------------------------
112-
-- FORMS --
113-
-- Until now, we have only read data. Let's see how we can write new data to our database
114-
-- You can use an existing table in your database
115-
-- or create the table by just creating a file at 'sqlpage/migrations/00_create_users.sql'
116-
-- containing the SQL query to create the table. For this example, we will use:
117-
-- CREATE TABLE IF NOT EXISTS users(name TEXT);
118-
119-
-- Displaying a form is as easy as displaying a table; we use the "form" component
120-
-- Let's display a form to our users
121-
select 'form' as component,
122-
'Create' as validate,
123-
'New User' as title;
124-
select 'number' as type,
125-
'age' as placeholder;
126-
select 'First Name' as name,
127-
true as autocomplete,
128-
true as required,
129-
'We need your name for legal reasons.' as description;
130-
select 'Last name' as name,
131-
true as autocomplete;
132-
select 'radio' as type,
133-
'favorite_food' as name,
134-
'banana' as value,
135-
'I like bananas the most' as label;
136-
select 'radio' as type,
137-
'favorite_food' as name,
138-
'cake' as value,
139-
'I like cake more' as label,
140-
'Bananas are okay, but I prefer cake' as description;
141-
select 'checkbox' as type,
142-
'checks[]' as name,
143-
1 as value,
144-
'Accept the terms and conditions' as label;
145-
select 'checkbox' as type,
146-
'checks[]' as name,
147-
2 as value,
148-
'Subscribe to the newsletter' as label;
149-
150-
-- We can access the values entered in the form using the syntax :xxx where 'xxx' is the name of one of the fields in the form
151-
-- insert into users select :"First Name" where :"First Name" IS NOT NULL;
152-
-- We don't want to add a line in the database if the page was loaded without entering a value in the form, so we add a WHERE clause
153-
-- Let's show the users we have in our database
154-
-- select 'list' as component, 'Users' as title;
155-
-- select name as title from users;
156-
-- The debug component displays the raw results returned by a query
157-
select 'debug' as component;
158-
select $x as x,
159-
:"First Name" as firstName,
160-
:checks as checks;

0 commit comments

Comments
 (0)