Introduction
Let's get to know each other in less than 5 minutes. This blog will teach you how to use HTML forms to interact with web generated graphic figures, 2D and 3D.
Why forms ? Why Javascript
Developing web sites is a quite straight forward game, kids can do it : the internet was built out of simple static HTML pages brought out to the world of emerging internet in the early 1990s by enthusiastic developers. Then came the first attempts of collecting readers feedback via the famous contact form : nowadays the FORM element is probably the most used of all HTML elements, and its best friend is the universal JAVASCRIPT language that serves so many purposes that I have to produce here my first enumeration list :
- HTML page interactivity : experience the famous "alert" function. You can start to play with the alert function on codepen
- HTML Server side processing : that's what we call AJAX, and you'll find that it's a feature you can't live without
- Server engine : NodeJs project is a javascript based web server engine started in 2009 as an alternative to Apache webserver. We don't plan to learn that aspect of javascript but it's good to kknow you learn a language that goes that far
Alternatives : host forms vs forms as a service
- typeform saves you time on multi step forms : one question at a time
- google forms is well known form maker integrated in google collaborative framework, you can group work on a form
- cognitoforms
Prerequisites : What level is required ?
This course is designed for all levels, starting from beginner level with very little experience of HTML / Javascript development, and running through various steps of knowledge to bring you to the level of expert professionnal developper.
You will obviously need to know a little bit about basic software developements techniques like
You show know
- a little HTML coding : create, edit and view a simple HTML page with basic tags like
<BODY>,<DIV>,<IMG>,<A>,<B>, etc…
You will learn
- Javascript integration including variables, loops, classes, functions, events.
- OOP - Object Oriented Programming, means working with reusable classes and objects. Great fun.
Requirements : what hardware / software do I need ?
You will need a good or not so good computer, requires only to browse the internet with
- Chrome and / or Firefox, search engines, and a code editor.
- Code editor :
- I recommend Visual Studio Code because it is free
- If you're into paid projects, do like me , I myself use PhpStorm a lot, which is not free, because it has integrated file transfer features and file comparison. WebStorm has tighter integration in javascript frameworks. It also comes with an integrated server debugger which makes previewing easier.
Code Editor Comparison : Visual Studio Code vs PhpStorm
| Feature | Visual Studio Code | PhpStorm |
|---|---|---|
| Syntax highlight | ✅ | ✅ |
| Project management | ✅ | ✅ |
| Local file versioning | ❌ (*) | ✅ |
| FTP | ❌ (*) | ✅ |
| File / Folder Comparison | ❌ (*) | ✅ |
(*) this feature is available via extension, but this requires time for installation and testing.
Concepts you will learn
- Conditional Form logic : use Javascript to display/hide form fields depending on other fields, validation, calculation
- Front end processing : use Javascript to render real time processing of any calculation you could imagine
- Multi step forms : use Javascript to hide / display specific sets of forms based on a predefined number of steps
- User confirmation : use PHP server side processing to perform various confirmation related tasks : formatting and sending email, generating PDF or images, database recording
Languages and technologies you will learn
it is very difficult to decide on which technology to use. I will help you on that with a few criteria
Learning curve : the spped at which you learn is important, we provide you with common standard technologies that you can search on the internet and find solutions quick
Durability : you need to make sure the time and money you invest in learning and developing stuff on a specific framework can last years. In technical terms we like to rely on the LTS Long Term Support versions of any project, if available. Sometimes we like to test new features too on alpha or beta versions 🙂
For this reasons we have chosen a popular and yet evolving framework that you can rely on, a combination of these very nice technologies
HTMLandCSS,Bootstrapfor front end display,Javascript&jQuery, for front end element manipulation, events and calculation,PHPfor server side processing,Mysqlfor database storing,- and for more advanced projects :
Laravel,WordPress,React,Magento
Who am i
Well obviously I'm a guy who like to write.
I love to write stories, but also write strong and secure web based interactive site, configurators, applications, online ecommerce shops, that will last between 10 and 20 years. Yes that can happen to a server near where you live (or work) 😀 .
What I have done
- Wine Growing calculator
- Swimming hat Configurator
- 3D gate configurator
- Invoicer : Automatic PDF generation