Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
web:new [2023-10-27 21:52] – [Setting up a new website] adminweb:new [2024-01-12 22:07] (current) – [Setting up a new website] admin
Line 4: Line 4:
     * Bootstrap: ''npm install bootstrap@5.3.2''     * Bootstrap: ''npm install bootstrap@5.3.2''
     * JQuery: ''npm install jquery''     * JQuery: ''npm install jquery''
-    * js-cookie: ''npm install js-cookie''+    * iziToast: ''npm install izitoast'' [[https://izitoast.marcelodolza.com/|IziToast]] 
 +    * js-cookie: ''npm install js-cookie'' [[https://github.com/js-cookie/js-cookie|js-cookie]] 
 +    * luxon: ''npm install luxon'' [[https://moment.github.io/luxon/api-docs/index.html|luxon API]] 
 +    * formvalidation:  [[https://formvalidation.io/|formvalidation.io]] 
 +      * ''npm install @form-validation/bundle'' 
 +      * ''npm install @form-validation/locales'' 
 +      * ''npm install @form-validation/styles'' 
 +      * ''npm install @form-validation/plugin-j'' 
 +    * sortableJS: [[sortablejs.github.io/Sortable/|sortableJS]] 
 +      * ''npm install sortablejs'' 
 +      * ''npm install jquery-sortablejs'' 
 +    * clipboardJS: ''npm install clipboard'' [[https://clipboardjs.com/]] 
 +    * vanillajs-datepicker: ''npm install vanillajs-datepicker'' [[https://mymth.github.io/vanillajs-datepicker/#/|vanillajs-datepicker]] 
 +      * Important: stopPropagation if used in a modal (to prevent actions like loading and submitting to happen automatically in the modal): 
 +        * <code>$('div.daterange').on('show.bs.modal', (e) => { 
 +  e.stopPropagation(); 
 +});</code> 
 +    * tinyMCE: ''npm install tinymce@^6'' [[https://www.tiny.cloud/docs/tinymce/6/npm-projects/|tinyMCE]]
   * Bootstrap customization   * Bootstrap customization
     * Create ''/scss'' folder and create ''custom.scss'' in it     * Create ''/scss'' folder and create ''custom.scss'' in it
   * composer modules: issue following commands in root of website:   * composer modules: issue following commands in root of website:
-    * simpleMysqli: ''composer require websitebeaver/simple-mysqli'' [[https://github.com/D-Marc1/Simple-MySQLi|1]] +    * simpleMysqli: ''composer require websitebeaver/simple-mysqli'' [[https://github.com/D-Marc1/Simple-MySQLi|Simple-MySQLi]] 
-    * phpMailer: ''composer require phpmailer/phpmailer'' [[https://github.com/PHPMailer/PHPMailer|2]]+    * phpMailer: ''composer require phpmailer/phpmailer'' [[https://github.com/PHPMailer/PHPMailer|PHPMailer]]
   * Use https://realfavicongenerator.net/ to create favicons   * Use https://realfavicongenerator.net/ to create favicons
 +  * Add Material Symbols Rounded Google font [[https://fonts.google.com/icons?icon.style=Rounded&icon.set=Material+Symbols|Google Fonts]]
 +  * plugins
 +    * clockpicker: [[https://weareoutman.github.io/clockpicker/jquery.html|clockpicker]]
 +      * use jQuery clockpicker (Bootstrap clockpicker does not work in Bootstrap 5) + adapt ''jquery-clockpicker.css'' (remove all ''.btn'' css rules as they conflict with Bootstrap)