This SQL Sandbox template is designed to showcase the capabilities of this tool. You can easily personalize it to meet your requirements, whether you want to use it as a frontend database or purely a backend solution.
This project serves as an example of what can be achieved. It is not a fully functional product. Feel free to use the source code and ideas as a starting point for your own projects.
This is one of the many templates available from W3Schools. Check our tutorials for frontend development to learn the basics of HTML, CSS and JavaScript. 🦄 Also check Python tutorial to grasp the backend of this template.
To be able to fully understand and modify this template to your needs, there are several things you should know (or learn):
Do not change SQLITE_PATH, as these are generated. If they are changed the space may not behave as predicted. Remember to switch DEBUG to false when going to production
- RESTful API routes linked with vanilla SQLite database functions.
- SQL Sandbox editor where you can run SQL commands and see the results below.
Customize this template to make it your own.
Remember to make your layout responsive - if you want your site to look good on smaller screens like mobile.
Implement more functionalities like updating existing data inside the database, or display the information in a way that suits you.
⚡️ Tip: Set up Google Analytics to get valuable insights about your space and visitors.
This template is made by using several technologies. Below are explanations about where to find specific code.
HTML files are stored in a folder called templates.
In templates/index.html you can add your external links and scripts as well as general code like a top bar or footer that will be used on every page.
CSS, images and JavaScript files can be found in static/.
The requests are handled by route functions in routes.py.
Dynamic spaces can use SQLite database.
The database file is called database.db. It is placed inside the w3s-dynamic-storage folder.
SQLite connection path to the database is w3s-dynamic-storage/database.db which you can use to connect to the SQLite database programmatically.
For this template, the database connection path can also be found in the environment.
Queries for the database can be found in the sqlite.py file.
Do not change the w3s-dynamic-storage folder name or database.db file name!
By changing the w3s-dynamic-storage folder name or database.db file name, you risk the space not working properly.
You can find:
- API routes in
routes.py - SQL functions in
sqlite.py - style of the app in
static/style.css
CodeMirror is utilized for syntax highlighting of SQL code within the text input field in the user interface.
Feel free to explore the CodeMirror settings in templates/index.html if you wish to modify the format of the text field.
Read more about CodeMirror.
For now files created/uploaded or edited from within the terminal view will not be backed up or synced.
Join our Discord community and ask questions in the #spaces-general channel to get your space on the next level.
Send us a ticket if you have any technical issues with Spaces.
Happy learning!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent